| Summary: | Elements get extra pixel on the edges bleeding their parent | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Yehonatan Daniv <maggotfish> | ||||||
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> | ||||||
| Status: | NEW --- | ||||||||
| Severity: | Normal | CC: | bfulgham, simon.fraser, smoley, webkit-bug-importer, zalan | ||||||
| Priority: | P2 | Keywords: | InRadar | ||||||
| Version: | Safari 14 | ||||||||
| Hardware: | iPhone / iPad | ||||||||
| OS: | iOS 14 | ||||||||
| Attachments: |
|
||||||||
Created attachment 418043 [details]
Screenshot of reproduction on iOS
Added a screenshot from iPhone
And related issue in Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=1168537 Thanks for filing, I can reproduce this on iOS 13.6.1 as well as the current 14.4 beta. |
Created attachment 418042 [details] Reproduction with minimal html Steps to reproduce the problem: (1) Open the attached index.html file (2) See red lines at bottom of elements (the red background is protruding through a transparent ~1px height line of the elements on top of it) What is the expected result? Elements should cover the entire space they take without their parents bleeding. What happens instead? Each element gets extra transparent padding of ~1px that's bleeding their parents.