We use the background: linear-gradient(transparent, transparent) hack to only send SVGs to browsers that support them. This rule is ignored by other browsers which fallback to the PNGs defined in the previous rule. However IE9 supports SVGs but not linear gradients, so misses out the SVGs it could otherwise handle (it even supports background-size:contain).
Description
Description
Related Objects
Related Objects
- Mentioned In
- T133094: Support MSIE 9
Event Timeline
Comment Actions
Yeah, this is known and basically a cantfix. http://pauginer.com/post/36614680636/invisible-gradient-technique
Comment Actions
It's very hard to fix. One could use an IE9 CSS selector hack (http://codemug.com/html/css-hacks-for-ie6ie7ie8ie9-and-ie10/) which would result in the SVG being repeated. Due to embedding that would be a bandwidth hit for everyone (lessened a bit by gzip). We could mark the IE9 selector as noembed to avoid that so that only IE9 users have to download individual SVGs (they are already downloading individual PNGs).
Comment Actions
Hmm. That sounds reasonable. If you want to fix it, go ahead :D
You'll probably want to fix:
- .oo-ui-background-image-svg2() mixin in [oojs/ui]/src/styles/common.less
- .background-image-svg() mixin in [mediawiki/core]/resources/src/mediawiki.less/mediawiki.mixins.less
- ResourceLoaderImageModule::getCssDeclarations() in [mediawiki/core]/includes/resourceloader/ResourceLoaderImageModule.php
This comment was removed by Volker_E.
Comment Actions
There doesn't seem to be a time-sensitive, easy way. We've got a working solution for IE 9 with fallback images, it's currently only 0.75% of our traffic and declining.