Text rendering accuracy in Safari when using iron-list inside iron-dropdown

[valdrinkoshi]

From @platosha on December 7, 2015 15:11

In Safari when scrolling a long iron-list placed inside an iron-dropdown, the items text is sometimes rendered 1 device pixel line outside the dropdown.

Expected outcome

The items text should not overflow outside the dropdown content element during vertical scroll.

Actual outcome

The items text is sometimes rendered 1 device pixel line outside the dropdown content.

Steps to reproduce

1. Create an iron-list with many items, assign background and dimentions in styles.
2. Wrap the iron-list with iron-dropdown
3. Assign a position target for iron-dropdown
4. Assign a non-integer pixel offset for the iron-dropdown position target. E. g.: margin-top: 0.4px;.
5. Toggle the dropdown and scroll the items list vertically

Demo

http://jsfiddle.net/3mprhn5p/2/

The issue is visible in Safari 9.0.1 (OS X 10.10.5). Other Safari versions aren't tested.

More noticeable on non-retina screens.

Generally this seems to be a Safari rendering issue. Occurs when CSS transforms are applied on the element containing text, while the element’s parent is positioned on non-integer pixel coordinates.

The rendering issue could be reproduced without Polymer Elements and Web Components as well, see this demo: http://jsfiddle.net/fghtdh7r/6/

Copied from original issue: PolymerElements/iron-dropdown#40

[valdrinkoshi]

From @cdata on January 29, 2016 22:35

/cc @blasten any thoughts on this issue?

[valdrinkoshi]

@platosha I've tested it on safari 9.1.1 on a non-retina display and I can't repro with the latest iron-dropdown http://jsbin.com/yosuno/1/edit?html,output

no zoom:

zoomed:

Most likely it got fixed in PolymerElements/iron-dropdown#63 and then when we moved the horizontal/verticalAlign to iron-fit-behavior.

Closing for now, let me know if you still see the issue and I'll re-open this ;)

[valdrinkoshi]

From @platosha on July 22, 2016 7:36

@valdrinkoshi I still see it.

On your screenshots, it doesn’t look like you scrolled the dropdown content. You need to scroll it until the letters start to disappear at the top.

[valdrinkoshi]

From @platosha on July 29, 2016 8:15

@valdrinkoshi Hope you noticed my comment above.

[valdrinkoshi]

@platosha yeah sorry for the late reply. You're right, if we scroll a bit we can see that happening.
iron-dropdown will set its top/left with subpixel precision (done by iron-fit-behavior which uses getBoundingClientRect), and apparently Safari has issues with keeping the content within those bounds. e.g. I see top: 59.828125px;, in the dev console for iron-dropdown. I have to set that to 59px for a proper rendering.
This issue should be moved to iron-fit-behavior