1

CSS3 Animations have been an ongoing issue in mobile safari and I've looked around for solutions but wasn't able to find anything particular for my situation.

Here's my setup: I have three pages, each is dynamically loaded into the DOM and the pages appear with a fade (using css3 animating opacity). The fade effect has been working great in the simulator and the device

Now, on one of the pages I added another CSS3 animation which is fired onclick of a button. i basically have a css class which adds the -webkit-animation-name: anim; to the element. The animation works fine, however leaving from that page to another suddenly features are very shaky/sluggish/poor fade animation.

I don't even have to start the animation by clicking the button, simply having all the css styles in causes the page fade to become very sluggish. If I remove all the animation related styles, the fade will work smoothly again...

I tried all the usual things already, added a translate3d(0,0,0), a -webkit-perspective, or -webkit-backface-visibility. All without effect, when there's css for another animation on the page, the fade animation becomes very sluggish!

Any ideas as to why that could be?

Thanks guys! Help is highly appreciated!

opfeffer
  • 603
  • 5
  • 19
  • Hi, did you find a fix ? – cocoa coder Oct 05 '12 at 12:51
  • I suspect you're already doing this - but did you check animation calls are using a translate3d() and not translate()? As I understand it, the translate() method is not optimised on some versions of ios so I'm not sure if that would help. Also are you aware that sometimes those css fixing styles need to be applied on all the elements rather than just the parent so I started out by updating all the calls to the optimised version and peppering my css with 'fixes' wherever I thought it might help! A combination of css and the correct call _finally_ worked for me. – Caroline Dec 19 '12 at 14:43

0 Answers0