image-set does not work without using background-size: cover on Firefox 88

349 Views Asked by At

image-set is now supported in Firefox 88, which is great news, however unlike other browsers it does not seem to work without setting background-size: cover;

To test this you'll need to be using Firefox 88 and have a high pixel density screen in order for image-set to use the high-res 2x background image, the image shown will display the text 'Retina image-set' if these are both true.

Run the below code snippet using Firefox 88, you'll notice that example 1 shows the whole image, while the second example, without background-size: cover, will show only part of the image which will appear stretched.

Now try again using an up-to-date webkit browser, you'll notice both examples show the image correctly.

I've been using image-set on webkit browsers for a few years now and it has always worked correctly without needing to set background-size. Am I doing something wrong? or is it a bug in FF 88?

Any help would be greatly appreciated :-)

#test {
        background-image: url(https://cloudfour.com/examples/image-set/assets/no-image-set.png); /*Fallback for browsers that dont support image-set*/
        background-image: -webkit-image-set(url(https://cloudfour.com/examples/image-set/assets/test.png) 1x,url(https://cloudfour.com/examples/image-set/assets/test-hires.png) 2x);/*-webkit- prefix for webkit browsers*/
        background-image: image-set(url(https://cloudfour.com/examples/image-set/assets/test.png) 1x,url(https://cloudfour.com/examples/image-set/assets/test-hires.png) 2x);/*Unprefixed image-set, which is now supported in Firefox 88*/
        width:200px;
        height:75px;
        }
        
        .add_cover { background-size: cover; }
Example 1 - With background-size: cover:
<div id="test" class="add_cover"></div>

Example 2 - Without background-size: cover:
<div id="test"></div>

1

There are 1 best solutions below

0
On BEST ANSWER

Turns out this is a bug in Firefox 88, which has been fixed in Firefox 89, due to be released early June 2021

FF Bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=1705877