CSS background-image relative path var() on Safari not loading image

user_960657 0
Viewed 1430

Not sure if anyone encountered this problem (I've seen similar but not exactly) but on Mac OSX Safari browser the following problems happen when you use the variable for a relative image location for a background-image, it doesn't load

:root {
  --lb3-widget-icon: url(../../images/logo-icon2.png);
}
.image-area {
  background-image: var(--lb3-widget-icon);
}

Here is an example of a project that has that problem: https://codepen.io/alexbernotas/pen/dypLKvR

As you can see that the image that is over the blue area in the top left corner is not loading, but on Firefox and Chrome it loads without any problems, any ideas?

enter image description here

Checked on:

  • Mac OS 11.2.1
  • Safari 14.0.3

I know if you use the full image path URI then it will work but I need to get it to work with relative file paths

EDIT:

A much simpler example: https://codepen.io/alexbernotas/pen/abpbVeG

css-variables relative-path safari css
2 Answers

This appears to be a Safari bug - seen also in IOS Safari (14.4).

The only workaround I can find is to have the background-image statement

background-image: var(--lb3-widget-icon);

in a style element in the main code file (with positioning of the png in the right relative place for that) - the var can still be set in the css file.

This is obviously not ideal, but does mean you can still use a CSS variable with relative folder path to select an image, though means the image folder has to move.

user_108674540

I just ran into this exact same bug. Thank you for writing it up!

For what it's worth, I added a redirect rule to my .htaccess file as a dumb but effective workaround:

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^.*/(images/bg_.+\.png) real/path/$1 [L,QSA]

This will redirect all requests for images/bg_XXX.png with an invalid prefix to the correct path at real/path/images/bg_XXX.png.

user_4668570
Related