Use translate3d and scale3d for better performance on iOS

[MajorBreakfast]

I am experiencing bad performance on iOS with the current version. With this change everything becomes buttery smooth.

[MajorBreakfast]

Please merge - It'd be nice to have this upstream. This PR doesn't change the look and feel of any of the animations. It just makes them perform better (like day and night on iOS!).

[ebidel]

Thanks for the PR. cc @cdata @notwaldorf

[zerodevx]

@MajorBreakfast, I was wondering - is there quantitative data on this? What version of Safari are you running? I will think modern browsers optimize this for you - I'd be surprised if Safari doesn't use GPU for both. For me, animations run quite smoothly as it is now (I'm using 9.0.2 btw).

I don't have any data though - I did however make super-quick cut-and-paste seat-of-the-pants bins:

500 moving stars! translate3d(): http://jsbin.com/puwevilapa/edit?html,output

500 moving stars! translate(): http://jsbin.com/dotujuduhe/1/edit?html,output

Try opening both using Safari... Is there a difference for you?

[MajorBreakfast]

@zerodevx No I don't have any data on this. But it's an old trick. The internet is littered with articles about this. Also it's clearly noticable on our iPad Pro. Can you add some scaling into the mix? My supsicion is that it might also have something to do with text rendering.

https://www.smashingmagazine.com/2012/06/play-with-hardware-accelerated-css/
"The fun part is that WebKit also offers a simpler 2D method that does the same thing: translate(x, y). But translate3d(x, y, z) uses the GPU, and that’s what we want."

@ebidel I think you're coming close to getting the award for slowest to merge open source project I've contributed to oO.

[addyosmani]

The team are sorry for the delay on reviewing this change, @MajorBreakfast. Just started helping out with this element.

The CSS will-change property (docs is the newer, preferred way to hint to the browser that an element is likely to change and requires the type of optimisations the translate hack previously provided. As these elements need to work well everywhere, I'd prefer that we use will-change rather than having to think about layering where to apply translate as a fall-back instead.

Safari supports will-change as of 9.1: https://developer.apple.com/library/prerelease/mac/releasenotes/General/WhatsNewInSafari/Articles/Safari_9_1.html. Interested in updating this PR to use that property instead?

[samuelli]

+1 to @addyosmani. @MajorBreakfast do you mind updating this PR?

[dstoc]

I think we should just do this directly in the polyfill. Filed web-animations/web-animations-next#449