How to resolve the relative path to an image in Safari being different than other browsers?

Viewed 236

I'm working on a site in which I've declared a few custom CSS properties to handle the URLs of a background image and I'm unsure why Safari is having issues adding the relative path to the images.

.image-wrapper {
    --image: url('../icons/basic-image.svg');

    &:before {
       content: var(--image);
    }

    &.primary {
        --image: url('../icons/primary-image.svg');
    }
}

In Chrome (and other browsers) the path being passed is https://localhost:3000/assets/img/arrow-small-primary.svg but in Safari, the path is https://localhost:3000/img/arrow-small-primary.svg. It appears as though the relative path is not being added to the URL but other assets not utilizing custom CSS properties handle the relative path just fine. Has anyone experienced this or know what's going on here?

My Safari version is 14.0.3 and my Chrome version is 90.0.4430.212.

Here are screenshots of both dev tools for more info.

Chrome:

enter image description here

Safari:

enter image description here

0 Answers
Related