UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36
Steps to reproduce the problem:
1. Launch attached repro.html in Chrome on a retina Macbook
2. Look at the three square boxes
3. Notice the yellow background shows through on the first two boxes
What is the expected behavior?
The background should fully cover the element such that the yellow background-color does not show at all.
What went wrong?
It seems the background-size: cover CSS property does not fully cover the background of an element when the image used is of certain dimensions AND the element is 60x60pixels. The attached file demonstrates it happening with both 201x201 and 276x276 PNG images. Interestingly enough if you change the size of the element to 59x59 then the two failing cases start passing and the passing case starts failing.
Did this work before? Yes Seems like this started in the past few months?
Does this work in other browsers? Yes
Chrome version: 57.0.2987.133 Channel: stable
OS Version: OS X 10.11.6
Flash Version:
|
Deleted:
repro.html
1.7 KB
|
|
Deleted:
fail276.png
51.6 KB
|
|
Deleted:
fail.png
49.5 KB
|
|
Deleted:
pass.png
49.4 KB
|
Comment 1 by sshon...@gmail.com
, Apr 11 2017322 KB
322 KB View Download