UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36
Example URL:
https://codepen.io/anon/pen/qawKNE
Steps to reproduce the problem:
Open CodePen and open the attached HTML file.
'single' = background-size is not set, so default image dimensions are used.
'double' = double pixel density background-image. If image file width is 50px, then background-size is set to 25px wide.
What is the expected behavior?
What went wrong?
System: Windows 7, 1920x1080, no system zoom
HTML file in Chrome: works
CodePen in Chrome: works
HTML file in Firefox: 'double' bleeds, margin has no effect, 200% zoom fixes the bug
CodePen in Firefox: 'double' bleeds, margin has no effect, 200% zoom fixes the bug
System: Windows 10, 1920x1080, no system zoom
HTML file in Chrome: 'double' bleeds, margin changes bleed pattern, 200% zoom fixes the bug
CodePen in Chrome: all bleed, margin has no effect, 200% zoom fixes the bug
HTML file in Firefox: 'double' bleeds, margin has no effect, 200% zoom fixes the bug
CodePen in Firefox: 'double' bleeds, margin has no effect, 200% zoom fixes the bug
This is reproducible with a range of image sizes and background-positions. The bleed pattern changes depending on the image file dimensions, even though the 'view window' for the background-image (set by width/height) stays the same.
The bleeding pattern can be changed by nesting the sprite inside containers and changing their widths, margins and paddings.
Does it occur on multiple sites: Yes
Is it a problem with a plugin? No
Did this work before? N/A
Does this work in other browsers? N/A
Chrome version: 54.0.2840.71 Channel: stable
OS Version: 10.0
Flash Version:
Possibly related to Issue 630702
This is also reproducible in Opera 41.0.2353.46 (and earlier).
|
Deleted:
file.html
1.9 KB
|
|
|
Deleted:
bleeding.png
590 bytes
|
Comment 1 by tkent@chromium.org
, Oct 27 2016