1

For the flickering issue on iPhone when using Transition CSS, for example this link: iPhone WebKit CSS animations cause flicker
My question is what exactly "-webkit-transform:translate3d(0,0,0);}" does conceptually that solves this issue?

Community
  • 1
  • 1
A_ehsaan
  • 23
  • 3

1 Answers1

0

The declaration -webkit-transform:translate3d(0,0,0);} activates hardware acceleration: iOS uses its GPU instead of CPU and the result is way smoother.
Translating by 0 pixel in 3 directions doesn't change anything to the position of your pixels so it's safe, except if it overrides an existing transform.

EDIT: it's been one way of activating GPU for a few years now but - broadening your question - it's not the only one and Chrome is changing or has changed its compositing/layer system. I didn't follow thoroughly these changes or new ways of activating it but you'll learn a lot by viewing demos on YT by Paul Irish, the Chromium blog, Google Devs or html5rocks

FelipeAls
  • 21,711
  • 8
  • 54
  • 74
  • Thanx for the explanation. Seems justified to me but I still have a small doubt. For example, I have an html page with a fixed header and a horizontal slider on it somewhere using horizontal scroll property which also uses a transition property. Now, when the slider scrolls to the end then the fixed element(Header) flickers. As far as I understand there is no transition on header then why does it affect the header. I would be grateful If you'd like to spare a few minutes again. – A_ehsaan Mar 19 '16 at 05:15