CSS src url changes relative paths to root

[mevanloon]

I have some font faces and image that are referenced relatively to the stylesheet, but those are all converted to "root" paths. So assets/fonts/coolfont.woff2 would become /assets/fonts/coolfont.woff2, which makes it not load.

[xenoborg]

My fonts work fine

@font-face {
font-family: alumni-sans;
src: url('fonts/Alumni_Sans/AlumniSans-VariableFont_wght.ttf');
}

but using the polyfill breaks any background image url or mask image url only in Firefox though, requiring a full web url to fix eg www.mywebsite.co.uk/folder/folder/i/test.png

.content__image {
width: 300px;
height: 300px;
clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
background-position: center;
background-image: url('i/test.png');
background-repeat: no-repeat;
background-color: black;
background-size: contain;
}

[weisJ]

I noticed this too. Background images are broken in Firefox (Linux only).

[weisJ]

This is due to the polyfill for non-inline styles putting the changed stylesheet into blob storage, which seems to have issues in firefox with relative urls. Seems like a non-css version would be very beneficial here. Or at least don't change stylesheets which don't need polyfilling.

[mevanloon]

Indeed, it would be cool if there was a workaround where we could select what stylesheets to parse, or which ones to ignore. I experience this in webkit btw.