Use -webkit-transform for much smoother iOS carousel animations

[petewarden]

The -webkit-transform extension causes webkit to switch to hardware-accelerated rendering on supported devices, which results in far smoother animations. This CSS change enables the extension for the carousel when it's available, and in practice we see iPad and iPhone animations improve from a juddery 2 frames-per-second at best, to something smooth enough to be native. For a demo, visit this page on an iOS device:

https://www.jetpac.com/carousel

I'm aware this is a bit bleeding-edge, but it's something we'll be using for our application, and I wanted to make it available to the community in case it's useful for anyone else.

[winterstetter]

@petewarden Very interesting, thanks pete! will there be a way to bring this to bootstrap? or to implement it with optional code?

[realityking]

All browsers support transform and all but IE9 (IE10 will) support transition. However AFAIK in none but webkit it can be detected by media queries. I wonder if there's a solution where it would work with all current browsers.

[petewarden]

@realityking I haven't seen any performance advantage to the transform path in non-webkit browsers, but it would be good to update this if and when they do accelerate this approach. At least until then the old left/top approach is automatically used as a fallback on all browsers.

[mdo]

In Chrome and Safari, I didn't notice much of a different at all (in fact I couldn't really discern any difference). We'll pass on this for now, but revisit it in a future point release since I know transitions and moving objects like this can get hairy quickly.

Thanks for the awesome suggestion though.

[petewarden]

Thanks for taking a look - it is iOS-specific so I wouldn't expect desktop Chrome and Safari to show much of a difference, but I appreciate you taking the time to check it out, and understand it's probably not a priority for most folks.