CSS image content not working in Safari and on mobile Firefox

user_2603421 0
Viewed 66

Not sure if this is a browser compatibility issue or what.

I have a page with an IMG tag that's set with one .png file as its SRC attribute, and a second, separate .png file set as the CSS 'content' property within a CSS breakpoint for landscape orientation.

The swap-out works as expected when I resize a window in Chrome or Firefox on desktop — in a portrait orientation the image shows the first .png file, and if I resize to a landscape orientation the image switches its src/content to show the second .png file.

It also works as expected when using Chrome on mobile — holding the phone in portrait it shows the image as the first .png file, and if I rotate the phone to landscape the image src/content changes to the second .png file.

But when I try in Safari on desktop, or in Firefox on mobile, the image src/content doesn't change, and stays fixed as the SRC .png file.

I checked the browser compatibility table on MDN and it seems to show 'content' as working across all browsers as of very early versions:

Eg, if I'm interpreting the table correctly it says Firefox on Android has supported the 'content' property since version 4 of Firefox. Meanwhile the "About Firefox" page on my testing phone shows the installed version as 92.1.1

Am I doing something wrong here? Is the MDN browser compatibility table just incorrect?

@media (min-aspect-ratio: 9/7) {
  #test_image {
    content: url(https://picsum.photos/300/200);
  }
}
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

<body>
  <img id="test_image" src="https://via.placeholder.com/300x200">
</body>

media-queries css-content css
1 Answers

Turns out the problem IS a browser-compat issue, but not with the CSS 'content' property.

Apparently CSS media queries aren't supported in Firefox for Android until version 99, released April of this year. So that explains the FF results.

And it's likely the version of Safari I was using on someone else's computer may have been too old a version for media queries too.

user_26034210
Related