Polymer (inline styling) inconsistent between Chrome and Firefox

[jstncno]

Hi,

I'm having issues with Polymer in Firefox 35. The elements are there, but trying to position and style them with inline CSS causes inconsistencies with Chrome, and the elements are all out of place. I also get a warning message in FF coming from upgrade.js:

mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create

[robdodson]

It's hard to know what the exact issue is without seeing your code. Keep in mind that Shadow DOM scoping does to work in Firefox so your styles may be having unwanted side effects.

The warning about modifying Prototype is a known issue. I don't think there's anything we can do about it.

[jstncno]

Hi @robdodson thanks for responding, I didn't realize how Firefox was treating the Shadow DOM. Just to be clear - scoping does not work in Firefox? Thanks again

[robdodson]

Correct. CSS scoping does not work in Firefox, Safari or IE. Firefox has said they are planning to ship Shadow DOM so hopefully that will be resolved soon, but the case remains for Safari and IE. Unfortunately it's impossible to polyfill CSS in that way.

You do get proper Shadow DOM encapsulation with DOM API methods in all browsers. For example, you shouldn't be able to getElementById if it's inside someone else's Shadow DOM.