LarsDenBakker commented 7 years ago

On Edge 16 the paper-checkbox checkbox is misaligned:

checkbox edge 16

kuenstl commented 7 years ago

The paper-checkbox is using the :host-context selector to detect dir="rtl" on a parent element. Inside the selector, the transform-origin is set to adapt the checkmark to the currently set direction.

See: Line 176 and Line 198

The missing polyfill for the :host-context selector (see shadycss issue about :host-context) behaves here differently in MS Edge as in Firefox.

In MS Edge the :host-context selector is applied always and thus the transform-origin is applied to the checkmark causing the misaligned checkmark (see screenhot above).
In Firefox the :host-context selector is always ignored and causes a misaligned checkbox when the rtl attribute was set to one of the parent elements.

DavidHenri008 commented 6 years ago

@azakus Any news on this one?

tiagocardoso commented 6 years ago

Any news ?

DavidHenri008 commented 6 years ago

From what I have seen, this is already fixed but it has not been deployed yet.

garats commented 6 years ago

I am facing the same issue, after debug I got a solution but not a way to implement it..

checkmark needs a left: 6px; to align it but this also affect other ok browsers.

Please suggest any other....

rediche commented 6 years ago

This was fixed in v2.0.3. Just make sure to update your installs and it should work. It was fixed in commit: https://github.com/PolymerElements/paper-checkbox/commit/b5970e25db7d3f0858619636ba2b6ac3377a5cc3

PolymerElements / paper-checkbox

Edge 16: Checkbox misaligned #183

checkmark needs a left: 6px; to align it but this also affect other ok browsers.