Screenshot on mediawiki.org on iPad w/ Retina display
The little search icon in the search box is visibly pixelated on high-resolution screens such as third-generation iPad, or when zooming in on browsers.
Recommend using an SVG with a PNG fallback.
Version: 1.19
Severity: normal
Whiteboard: gci2013 https://www.mediawiki.org/wiki/Google_Code-In#Candidate_tasks
Attached:
For SVG with PNG fallback we have been used the technique described at http://pauginer.tumblr.com/post/36614680636/invisible-gradient-technique
The magnifying glass icon in the language selector at http://translatewiki.net/ uses SVG graphics in this way.
Pau, this has been discussed on https://gerrit.wikimedia.org/r/#/c/3687/ previously and considere non-viable. Has the situation changed that much in a year?
My proposed technique is slightly different than the one proposed in the patchset. This one is based in the fact that all the browsers that support CSS gradients[1] support also SVG[2].
So this is really cross-browser safe:
background: transparent url(fallback-image.png) center center no-repeat;
background-image: linear-gradient(transparent, transparent), url(vector-image.svg);
With the above rule, only the following browsers will consider the SVG version:
IE 10, Firefox 16+, Chrome 26, Opera 12+, Opera Mobile 12.1, Firefox fr android 18.0. All of them supporting SVG.
You can even add -webkit prefix version (only with the new syntax) for the gradients and you still be safe with a wider browser support: Crome 10+, iOs safari 5.0+, Android browser 4.0+, and Blackberry browser 10.0
We tested this with crossbrowsertesting.com and used this technique for the graphics on the language selector at http://translatewiki.net/ without problems.
[1] http://caniuse.com/css-gradients
[2] http://caniuse.com/svg
I created a new patchset so that this can be tested: https://gerrit.wikimedia.org/r/#/c/50355/
Change 97307 had a related patch set uploaded by M4tx:
Added SVG version of search button icon (bug 35336).
Change 97307 had a related patch set uploaded by M4tx:
Added SVG version of search button icon (bug 35336).
(That patch is blocked by https://gerrit.wikimedia.org/r/#/c/82100/ being merged first. The icon is currently an <img> in page source, which makes using Pau's technique impossible.)