| • brooke | |
| Mar 19 2012, 11:09 PM |
| F9053: IMG_0016.PNG | |
| Nov 22 2014, 12:16 AM |
Recommend using a resolution-independent SVG with a PNG fallback, or else use CSS media queries to use a higher-resolution image on displays with 2x scale factor.
Version: unspecified
Severity: trivial
Whiteboard: gci2013 https://www.mediawiki.org/wiki/Google_Code-In#Candidate_tasks
Created attachment 10275
Screenshot on mediawiki.org on iPad w/ Retina display
Heart tab icon is clearly pixelated.
Attached:
Some progress:
http://commons.wikimedia.org/wiki/File:Heart_icon.svg
Still need to convert it into sprite files and put it in the extension.
I think that'll fail on non-IE browsers that don't support SVG in CSS backgrounds, which'd catch at least Firefox 3.6 (SVG supported, but not in <img> or CSS) and Android 2.x (no SVG)
http://caniuse.com/#feat=svg-css
Also, I'm not sure that HTML-style conditional comments work in CSS... that seems a bit funky.
Something like this could work, though it's sub-ideal:
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
#ca-wikilove.icon a {
background-image: url(images/heart-icons-red.svg);
}
}
The only Android devices with a pixel ratio of 2 are running Android 4 or later, so have SVG support.
This would however not give you the SVG on an older iPad with non-retina display, or on a non-high-res computer, showing the pixelated PNG when you zoom in...
...and of course it'd be nice to support displays with a density factor < 2 (Windows 8 slates will come in 1.0, 1.4, and 1.8 flavors allegedly; many phones today are 1.5)
There's also the option of using a high-res PNG and using:
-moz-background-size
-webkit-background-size
background-size
That will cover everything except IE < 9 (including Android).
Can anyone confirm if conditional CSS comments work in MediaWiki or not? i.e. do they get stripped out by the minifier?
I don't think they'll get stripped out, since they're not comments in CSS.
RL loader script shows it intact:
\x3c!--[if lt IE 9]\x3e background-image:url(data:image/png;base64,iVBOR......==);background-image:url(http://pancake.local/core/extensions/WikiLove/modules/ext.wikiLove/images/heart-icons-red.png?2012-04-13T19:08:20Z)!ie;\x3c![endif]--\x3e
Double-size PNG and use of *-background-size will be the most compatible thing for now -- but beware that some older browsers don't support background-size so it's probably best to only do that in a @media with a -*-min-device-pixel-ratio.
https://gerrit.wikimedia.org/r/4924 works around this for Special:Upload by using readAsArrayBuffer and converting the buffer to a binary string (which the jpeg metadata library wants).
Better fix would be to update the metadata library to accept array buffers as well.
Also needs fixing in UploadWizard.
There is a patch in Gerrit from a Google Code-in student. I have asked him to fix the commit message to mention this bug report.
In the meantime, your reviews are welcome. Thank you!
Change 96356 had a related patch set uploaded by Sniok:
Adding HiDPI 'Heart' SVG icon