Page MenuHomePhabricator

SVGs aren't served to IE9
Closed, DeclinedPublic

Description

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

Related Objects

Event Timeline

Esanders created this task.Apr 14 2016, 3:28 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 14 2016, 3:28 PM
Esanders triaged this task as Low priority.Apr 14 2016, 3:33 PM

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

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
Jdforrester-WMF moved this task from Backlog to OOjs-UI-0.16.6 on the OOUI board.Apr 19 2016, 4:28 PM
Jdforrester-WMF edited projects, added OOUI (OOjs-UI-0.16.6); removed OOUI.
Restricted Application added a subscriber: TerraCodes. · View Herald TranscriptApr 19 2016, 4:28 PM
Jdforrester-WMF moved this task from OOjs-UI-0.16.6 to Doing on the OOUI board.Apr 19 2016, 8:18 PM
Jdforrester-WMF edited projects, added OOUI; removed OOUI (OOjs-UI-0.16.6).
Jdforrester-WMF moved this task from Doing to Next-up on the OOUI board.Apr 25 2016, 6:17 PM
This comment was removed by Volker_E.
Volker_E closed this task as Declined.Mar 21 2017, 6:33 PM

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.