Google Code-in

See https://phabricator.wikimedia.org/T102154

In MediaWiki's MobileFrontend extension, instead of serving two images, serve one. Then use transform: scaleY(-1); to inverse it; creating an up arrow.

Support for 2d transforms is quite good: http://caniuse.com/#feat=transforms2d The only known lack of support is IE <= 8 and Opera Mini. The fallback would be that the image doesn't flip on click. Alternatively, you could use a class on the element (like Modernizr) to serve the fallback image only when transforms are not supported (e.g. .up { transform; } .support-no-transform .up { background-image; no-embed url; }) but that's probably not needed. Clients not supporting this should be served the javascriptless version.

This would remove the need for the image asset for mw-ui-icon-arrow-up.

See: https://phabricator.wikimedia.org/T102154

Expected: Serve one image and use your CSS-fu to make it two.