image-set without depending on background-size
Categories
(Firefox :: Untriaged, defect)
Tracking
()
People
(Reporter: support, Unassigned)
Details
Attachments
(2 files)
Example with and without background-size being set
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36
Steps to reproduce:
I used CSS image-set without setting background-size to 'cover', where the image has a defined width and height which match the size of the 1x version of the image, with the 2x version of the image being exactly double that of the 1x. CSS Example:
.image {
background-image: image-set(url("low_res_200x75.png") 1x,url("hi_res_400x150.png") 2x);
width: 200px;
height: 75px;
}
Actual results:
When using a high pixel density screen where the 2x image is used, instead of the whole high resolution image fitting into a 200px by 75px space, only the top right part of the larger image is shown, as if it is not being treated as a high pixel alternative and instead being used as a 1x image.
For an live example run the code snippet on this Stack Overflow page: https://stackoverflow.com/questions/67404000/image-set-does-not-work-without-using-background-size-cover-on-firefox-88
Also see the attached screenshot of how this image looks with and without background-size being set to 'cover'
Expected results:
The whole 2x image should fit into the 200px by 75px space without needing to set background-size, taking advantage of the high pixel density of the screen, showing a much sharper version of the image rather than the 1x version.
Setting background-size is not required on other browsers who support image-set, whether thats wrong or right im not sure. The requirement of having to set background-size makes using image-set for sprites impossible, as with a sprite you only want a part of the image shown in both 1x and 2x versions.
This is how it should look and how it does look on other browsers that support image-set
|
||
Comment 2•3 years ago
|
||
This is fixed in Nightly / Beta already, in bug 1705877.
Description
•