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}/`);

[MurhafSousli]

@benefiction Wow, that actually worked! here is a fixed polyfill CDN link https://cdn.statically.io/gist/MurhafSousli/c852b6a672069396953f06ddd4b64620/raw/7089126915c424e85fba611d179fc5687b8743a0/scroll-timeline.js

[MurhafSousli]

@benefiction Is it possible to exclude the view-timeline and also CSS Animations usage? I only need the JS usage for scroll-timeline.

[oguzhan18]

Hi everyone,

I understand the frustration with the polyfill breaking font faces and background images in Firefox due to the conversion of relative paths to root paths. This issue seems to stem from how the polyfill handles non-inline styles, placing them into blob storage, which causes problems with relative URLs in Firefox.

Proposed Solution Here's a workaround that modifies the scroll-timeline-css-parser.js file to ensure relative URLs are correctly parsed:

Locate the line that handles URL replacement in scroll-timeline-css-parser.js (line 89). Replace it with the following code to ensure URLs are correctly prefixed with the origin:

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

This code ensures that any relative URL starting with ./ or / is correctly prefixed with the site's origin.

Example

src: url('fonts/Alumni_Sans/AlumniSans-VariableFont_wght.ttf');

[manuelmeister]

I've adjusted the regex to only take all relative urls.

/url\((?:(['"])(?!https?:\/\/|data:|blob:|\/)|(?!['"]?(?:https?:\/\/|data:|blob:|\/)))(?:\.\/)?/gm

https://regex101.com/r/RBkYGE/5

I've created a PR to solve this behaviour.