Bug 220798 - Elements get extra pixel on the edges bleeding their parent
Summary: Elements get extra pixel on the edges bleeding their parent
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 14
Hardware: iPhone / iPad iOS 14
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-01-21 08:01 PST by Yehonatan Daniv
Modified: 2021-01-21 17:54 PST (History)
5 users (show)

See Also:

Attachments
Reproduction with minimal html (367 bytes, text/html)
2021-01-21 08:01 PST, Yehonatan Daniv 		no flags Details
Screenshot of reproduction on iOS (14.02 KB, image/jpeg)
2021-01-21 08:04 PST, Yehonatan Daniv 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Yehonatan Daniv 2021-01-21 08:01:20 PST 
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.
Comment 1 Yehonatan Daniv 2021-01-21 08:04:47 PST 
Created attachment 418043 [details]
Screenshot of reproduction on iOS

Added a screenshot from iPhone
Comment 2 Yehonatan Daniv 2021-01-21 08:12:18 PST 
And related issue in Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=1168537
Comment 3 Smoley 2021-01-21 17:54:09 PST 
Thanks for filing, I can reproduce this on iOS 13.6.1 as well as the current 14.4 beta.
Comment 4 Radar WebKit Bug Importer 2021-01-21 17:54:17 PST 
<rdar://problem/73477813>