Bug 200372

Summary: Improper placement of background image with bg-position: bottom and bg-size: cover
Product: WebKit Reporter: Jon Lee <jonlee>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: bfulgham, jamaln, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: WebKit Nightly Build   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
Image of glitch in Chrome none

Jon Lee
Reported 2019-08-01 18:19:20 PDT
In Safari, go to https://www.guidetoetfs.com Resize the window horizontally. The top section is a background image that bakes in the notch. When I resize the window I can sometimes see 1/2 px of the repeated background. The rules: section:nth-child(1) { background-image: url(../images/Skyscrapers.jpg); background-position: center bottom; background-size: cover; } If I add background-repeat: no-repeat, the visual glitch goes away. Because the vertical position is bottom, I'd never expect to see this. I don't see the glitch on Chrome.
Attachments
Image of glitch in Chrome (132.06 KB, image/png)
2019-09-28 10:49 PDT, Jamal Nasser 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Jon Lee
Comment 1 2019-08-01 18:21:51 PDT
To see the problem you may need to open up Web Inspector and remove the background-repeat rule.
Radar WebKit Bug Importer
Comment 2 2019-08-01 18:57:15 PDT
<rdar://problem/53844062>
Jamal Nasser
Comment 3 2019-09-28 10:49:56 PDT
Created attachment 379789 [details] Image of glitch in Chrome I'm able to reproduce this on Chrome (Version 77.0.3865.90) after removing the background-repeat rule. It is, however, much less pronounced than on Safari.
Note You need to log in before you can comment on or make changes to this bug.