I polished the technique a bit more to solve previous issues: http://dl.dropbox.com/u/30377416/design/loading-indicator/loading-gradient.h...
To better detect browser capabilities, I used a transparent gradient as a secondary background image. That makes old Webkit browsers (which solves problem with Android 2.x) and IE9 (capable of multi-background but not animations) to use the Gif Fallback.
background: transparent url(images/*loading.gif*) center center no-repeat;
background-image: *linear-gradient(transparent, transparent),* url(images/ *loading-static.svg*);
In addition, I used CSS animations since the SVG animation was problematic on Safari.
In theory (based on browser version support for gradientshttp://caniuse.com/css-gradientsand svg http://caniuse.com/#feat=svg), it should work across all browsers (some SVG-capable old browsers may still use the fallback but it guarantees that SVG is not used by browsers not able to render it).
Pau
On Fri, Nov 23, 2012 at 8:06 PM, Siebrand Mazeland (WMF) < smazeland@wikimedia.org> wrote:
Nope. No HQ image on zoom.
-- Siebrand Mazeland
M: +31 6 50 69 1239 Skype: siebrand
Op 23 nov. 2012 om 20:00 heeft Pau Giner pginer@wikimedia.org het volgende geschreven:
Thanks for the feedback siebrand.
I could reproduce it in Safari and fix it. Does it work now in the iPad?
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design