Polymer example not working in Firefox
I was writing the Polymer app when I realized that my dropdown menu item was not working on updated Firefox, but was giving no problems in Chrome.
All balancing components are correctly installed and accessible. There are no console errors in any of the browsers.
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/core-menu/core-menu.html">
<link rel="import" href="bower_components/paper-item/paper-item.html">
<link rel="import" href="bower_components/paper-dropdown/paper-dropdown.html">
<link rel="import" href="bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
</head>
<body>
<style>
paper-dropdown-menu {
left: 24px;
width: 180px;
}
</style>
<paper-dropdown-menu label="Your favorite food">
<paper-dropdown class="dropdown">
<core-menu class="menu">
<paper-item>Pasta</paper-item>
<paper-item>Pizza</paper-item>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
<paper-button raised>CLICK ME</paper-button>
</body>
</html>
UPDATE: I tried downloading a demo snapshot from paper and running it on localhost. Installed all the components using gazebo but still doesn't work in Firefox. Works fine in Chrome.
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link href="bower_components/core-collapse/core-collapse.html" rel="import">
<link href="bower_components/core-menu/core-menu.html" rel="import">
<link href="bower_components/paper-dropdown/paper-dropdown.html" rel="import">
<link href="bower_components/paper-item/paper-item.html" rel="import">
<link href="bower_components/paper-dropdown-menu/paper-dropdown-menu.html" rel="import">
</head>
<body>
<template is="auto-binding">
<paper-dropdown-menu label="Your favorite pastry">
<paper-dropdown class="dropdown">
<core-menu class="menu">
<template repeat="{{pastries}}">
<paper-item>{{}}</paper-item>
</template>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
</template>
<script>
scope = document.querySelector('template[is=auto-binding]');
scope.pastries = [
'Apple fritter',
'Croissant',
'Donut'
];
</script>
</body>
</html>
+3
source to share