Open valdrinkoshi opened 8 years ago
From @cdata on January 29, 2016 22:35
/cc @blasten any thoughts on this issue?
@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 https://github.com/PolymerElements/iron-dropdown/pull/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 ;)
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.
From @platosha on July 29, 2016 8:15
@valdrinkoshi Hope you noticed my comment above.
@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
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
margin-top: 0.4px;
.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