Last modified: 2014-02-06 11:40:47 UTC
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.
Created attachment 10275 [details] Screenshot on mediawiki.org on iPad w/ Retina display Heart tab icon is clearly pixelated.
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.
What do you think of this solution? https://gerrit.wikimedia.org/r/#change,4842
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.
This appears to be the wrong bug entry. D'oh!
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! https://gerrit.wikimedia.org/r/#/c/96356/
Change 96356 had a related patch set uploaded by Sniok: Adding HiDPI 'Heart' SVG icon https://gerrit.wikimedia.org/r/96356
Change 96356 merged by jenkins-bot: Adding HiDPI 'Heart' SVG icon https://gerrit.wikimedia.org/r/96356
This ought to be fixed by the above patch. Thanks!
