search

rodneyrehm / viewport-units-buggyfill

Making viewport units (vh|vw|vmin|vmax) work properly in Mobile Safari.
MIT License
1.59k stars 151 forks source link

CORS stylesheets broken for relative resources #11

Open rodneyrehm opened 10 years ago

rodneyrehm commented 10 years ago

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.

miketramontano commented 10 years ago

Hmm any progress made on this? Alternatively, is there a way to exclude certain domains from being procesed?

rodneyrehm commented 10 years ago

no progress has (as in no attempts to solve have) been made on this front so far. You're welcome to try :)

miketramontano commented 10 years ago

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...

paulftw commented 9 years ago

+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.

rodneyrehm commented 9 years ago

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…

exozed commented 9 years ago

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?

rodneyrehm commented 9 years ago

that should work, yes