NEW 200372
Improper placement of background image with bg-position: bottom and bg-size: cover 
https://bugs.webkit.org/show_bug.cgi?id=200372
Summary Improper placement of background image with bg-position: bottom and bg-size: ...
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.