viewport-units-buggyfill
viewport-units-buggyfill copied to clipboard
rodneyrehm
CORS stylesheets broken for relative resources
Simply downloading and injecting a CSS file into the DOM will break fonts and images referenced by a relative URL. This is because relative URLs within a <link>ed stylesheet are resolved against the URL of the CSS resource, but all resources in a <style> element are resolved against the URL of the document.
After downloading and before injecting the CSS, a processing step has to be introduced that scans the document for url("") and @import ""; occurrences and resolves relative paths against the stylesheet's URL.
Depending on URI.absoluteTo() for the heavy lifting may seem convenient, but adds way too much to the file size. The DOM URL interface is not available on iOS 7.
Hmm any progress made on this? Alternatively, is there a way to exclude certain domains from being procesed?
no progress has (as in no attempts to solve have) been made on this front so far. You're welcome to try :)
So this isn't going to be a good work around for all, but within importCrossOriginLinks, just inside the foreach over the document stylesheets, I've simply put a return to skip all of them. Does the trick for us since our cross origin css are only for fonts. At some point I'd like to throw an option in skipCrossOriginLinks and issue a pull request, but until then...
+1 for adding an option to ignore certain stylesheets or URLs. CSS files rarely use vh and vw so it's a bit of an overkill to process all of them. I am assuming that parsing is done solely to replace all usages of viewport units - a wild guess since I don't yet understand how exactly the polyfill works.
v0.5.0 added an option to ignore certain style sheets <link rel="…" data-viewport-units-buggyfill="ignore">. Obviously this doesn't solve the core issue, but may help you circumvent the problems…
If we copy the classes with vh and vw, with only vh, vw parts, on another style sheet and use buggyfill="ignore" on the main css. If we include the new file after the main css. Will this be a work around for relative images URLs and the loosing fonts?
