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.

[robzor]

I am also encountering this with my fonts, the polyfill works fine on Safari but not Firefox.

This the path which has to be in this format for our Vite config to work:

src: url('/fonts/greed-condensed/greed-condensed-heavy.woff2') format('woff2');

Does anyone have a fix or a workaround for this? @flackr

Thanks,

Robin

[robzor]

@bramus do you have any thoughts on this? You seem to be active in the issues! :)

[benefiction]

I am also encountering this with my fonts, the polyfill works fine on Safari but not Firefox.

This the path which has to be in this format for our Vite config to work:

src: url('/fonts/greed-condensed/greed-condensed-heavy.woff2') format('woff2');

Does anyone have a fix or a workaround for this? @flackr

Thanks,

Robin

Hi Robin,

If you create the scroll-timeline script from this project on your own, you can substitute this line (https://github.com/flackr/scroll-timeline/blob/master/src/scroll-timeline-css-parser.js#L89) with the following lines:

    const { origin } = location;
    return p.sheetSrc.replace(/url\(("|'?)\//gm, `url($1${origin}/`);

Using replace() may not be the most efficient solution, but it is more versatile, especially if you're unsure whether you'll be dealing with "url(''), url("") or url() pattern."

If you know what you are dealing with, you could use the more performant split().join() approach.

Cheers!

[MurhafSousli]

@benefiction I tried your solution, forked the project and change that line and built a script. the script still breaks the font when loaded.

reproduction to the issue here https://github.com/MurhafSousli/ngx-scrollbar/issues/615

[benefiction]

@benefiction I tried your solution, forked the project and change that line and built a script. the script still breaks the font when loaded.

reproduction to the issue here MurhafSousli/ngx-scrollbar#615

@MurhafSousli I see, may this suits better for you:

    const { origin } = location;
    return p.sheetSrc.replace(/url\(("|'?)\.?\//gm, `url($1${origin}/`);