paper-checkbox icon indicating copy to clipboard operation
paper-checkbox copied to clipboard

Published 20 hours ago • verified publisher icon PolymerElements

Edge 16: Checkbox misaligned

Open LarsDenBakker opened this issue 7 years ago • 6 comments

On Edge 16 the paper-checkbox checkbox is misaligned:

checkbox edge 16

LarsDenBakker avatar Nov 05 '17 14:11 LarsDenBakker

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.

kuenstl avatar Nov 06 '17 12:11 kuenstl

@azakus Any news on this one?

DavidHenri008 avatar Mar 16 '18 20:03 DavidHenri008

Any news ?

tiagocardoso avatar Mar 28 '18 10:03 tiagocardoso

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

DavidHenri008 avatar Mar 28 '18 11:03 DavidHenri008

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....

garats avatar Apr 05 '18 07:04 garats

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

rediche avatar Apr 18 '18 12:04 rediche