Search code examples
csssafarirelative-pathcss-variables

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

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

Solution

  • 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.