Bug 200372 - Improper placement of background image with bg-position: bottom and bg-size: cover
Summary: Improper placement of background image with bg-position: bottom and bg-size: ...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2019-08-01 18:19 PDT by Jon Lee
Modified: 2019-09-28 10:49 PDT (History)
5 users (show)

See Also:

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 an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Jon Lee 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.
Comment 1 Jon Lee 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.
Comment 2 Radar WebKit Bug Importer 2019-08-01 18:57:15 PDT 
<rdar://problem/53844062>
Comment 3 Jamal Nasser 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.