CODEWITHSUNDEEP
google-chromefirefoxpolymer
geecko
geecko

Reputation: 667

my Polymer website does not work on firefox

The page is at http://5heurescod.tk. Please inspect the source to see what I could have done wrong.

It works well on Chrome but not on firefox.. Did I forget to import something?

(edit: when I say it doesn't work, I mean that the menu on the left is not clickable and the javascript function getCard(); which should be called at start is not called.)

I used

bower install --save Polymer/polymer
bower install --save Polymer/core-elements
bower install --save Polymer/paper-elements

Any idea? Thanks!

Upvotes: 4

Views: 8107

Answers (6)

Michele Dibenedetto
Michele Dibenedetto

Reputation: 575

I had same problem with Firefox, I recommend you to use the polyfill webcomponents-lite.js rather webcomponents.js which has some issue with smartdevices. As it is said in https://www.polymer-project.org/1.0/docs/browsers

We recommend using the webcomponents-lite.js version of the polyfills with Polymer 1.0+. This version is designed to be used with Shady DOM, and does not contain the full Shadow DOM polyfill.

Although the full webcomponents.js polyfill works with Polymer 1.0+, we do not recommend using it. This version contains the full Shadow DOM polyfill, which is known to have high performance overhead.

You need also to pay attention for the tag link which does not work inside your webcomponent, in that case just move it to the page which hostes the webcomponent.

Upvotes: 1

nityanarayan
nityanarayan

Reputation: 378

Its all about browser support for web components.

Where browser's native support is not available for web components, then this pollyfills under "bower_components/webcomponentsjs/" Either of "webcomponents.js" or "webcomponents-lite.js" is needed.

See: https://www.polymer-project.org/1.0/docs/browsers

Upvotes: 0

onin
onin

Reputation: 5760

For me, it was the fact that I was loading webcomponents-lite.min.js, instead of the full version, webcomponents.min.js.

Upvotes: 0

DocDude
DocDude

Reputation: 2873

At a glance, I'd say:

  • make sure the web components polyfill (webcomponents.js, formerly platform.js) is loaded first, certainly before any HTML imports, since this includes the polyfill for HTML imports.

  • wait for the polymer-ready event before manipulating any of the DOM or setting CoreStyle properties. You might be able to get away with this on Chrome, because native HTML imports work a little differently -- but definitely not on Firefox or any browser without native HTML imports.

    See: https://www.polymer-project.org/0.5/docs/polymer/polymer.html#polymer-ready

Upvotes: 7

Gamby
Gamby

Reputation: 592

html imports are not supported by Firefox, visit https://www.polymer-project.org/0.5/resources/compatibility.html

And platform.js i no longer used, now you should include firstly webcomponents.js, visit https://www.polymer-project.org/0.5/docs/start/platform.html

Upvotes: 1

user1206862
user1206862

Reputation:

In my case I had all the imports in an elements.html (including the webcomponents.js). I moved the script tag from the elements.html to index.html and it worked. I put the script tag right before importing the elements.html. The resulting index.html was:

<head lang="en">
<meta charset="UTF-8">    
<title></title>
<script src="bower_components/webcomponentsjs/webcomponents.js">
</script>

<link rel="import" href="elements.html">
<link rel="stylesheet" href="css/core_toolbar.css">    
</head>

Upvotes: 1

Related Questions