The star icon for watch in Vector skin's icon-watch mode is a low-resolution raster image, visibly pixelated on high-resolution screens such as the new iPad with Retina display, or when zooming in in the browser.

Recommend replacing with SVG and PNG/GIF fallback if possible.

Note that the star spins, so the GIF animation would need to be either replaced with a higher-resolution GIF or by animating the SVG image.

This was a JS feature, we should be able to handle this a bit easier than the static stuff.

The animation is nothing but a spin, right? Instead of trying to continue using horrible gifs or animate SVG in a way that probably won't be supported. How about we try using css?
Most browsers with .svg support should support css3-animations.

We can detect animation support + .svg support. If the browser supports both then we'll use a .svg image and animate it with a css3-animation. Otherwise we'll just use the .gif.

I'm even more inclined to think we should be using css3 animations instead of an animated .gif for this now.

I did a little testing on the watch icon and there is a notable performance difference between the use of a .gif and a css3 animation.
A single running animated .gif makes Chrome on my computer renders the page at ~33FPS. While using a proper css3 animation instead renders at the complete 55-60FPS.

.gifs are inefficient. Because they are image frame based rather than a simple instruction like "rotate this" the browser has to re-draw images for each frame. As a result a css3 animation which gets to use the GPU to make simple modifications will always perform better. And will also do a much smoother animation. (Fixed frame list vs. a rotation that can create a frame for any point in the rotation and animate at the refresh rate).

I have asked the student to submit a Gerrit change, but while he learns to do this, could you please check the zip file and comment? Isn't the animation too slow, or is this related with thefull screen size of the start I see when opening the file?

The animation is set to 10s, which seems pretty slow (in terms of total time). It also renders kind of slowly for me (poor frame rate), which is probably because it's a 1000x1000 image instead of the intended size. :)

Recommend:

don't embed the SVG in the HTML; the SVG file should be loaded as a background image via CSS, so we can let it fall back to a PNG version for some older browsers

Add Comment

Text is available under the Creative Commons Attribution-ShareAlike 3.0 License; code is available under the GNU General Public License or other appropriate open source licenses. By using this site, you agree to the Terms of Use and Privacy Policy. · Wikimedia Foundation · Privacy Policy · Terms of Use · Disclaimer

Column Prototype

This is a very early prototype of a persistent column. It is not expected to work yet, and leaving it open will activate other new features which will break things. Press "\" (backslash) on your keyboard to close it now.