Databases
StackOverflow2013
Postsdbo
POiPad css3 animation flickers after keyboard use
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POiPad css3 animation flickers after keyboard use
    text
    copied!<p>I'm developing an app for the iPad using HTML5/CSS3. I'm not using any framework and am just using whatever is natively supported on the device. I have created some css3 animations to emulate the typical iOS sliding left or sliding right when navigating between screens. Here's an example of the slide left animation which is taking advantage of the iPad's CSS3 hardware acceleration: (the ipad is running 4.2).</p> <pre><code>/************************************************* Slide Left *************************************************/ .screen.slideleft{ -webkit-animation-duration: 0.5s; -webkit-animation-timing-function: ease-in-out; } .screen.slideleft.outgoing{ z-index: 50 !important; -webkit-animation-name: slideleft-outgoing; } .screen.slideleft.incoming{ z-index: 100 !important; -webkit-animation-name: slideleft-incoming; } @-webkit-keyframes slideleft-outgoing{ from { -webkit-transform: translate3d(0%,0,0); } to { -webkit-transform: translate3d(-100%,0,0); } } @-webkit-keyframes slideleft-incoming{ from { -webkit-transform: translate3d(100%,0,0); } to { -webkit-transform: translate3d(0%,0,0); } }</code></pre> <p>I also have this CSS which I've attempted to use to fix the flicker: <code><pre> .incoming, .outgoing{ display: block !important; -webkit-backface-visibility: hidden; } </pre></code></p> <p>This works great until the iPad keyboard is used. After which point all the animations flicker severely.</p> <p>I've been looking for examples of an iPad HTML5 app that uses the keyboard and doesn't have flickers afterwards, but haven't turned up much. The jqTouch demos exhibit the same behavior on the iPad (although I know they were designed for the iPhone).</p> <p>I've turned up a few posts/questions of similar questions but have never found a good answer. I've been through <a href="http://css3animator.com/2010/12/fight-the-flicker-making-your-css3-animation-bomb-proof/">http://css3animator.com/2010/12/fight-the-flicker-making-your-css3-animation-bomb-proof/</a> and the articles linked there but haven't had any success.</p> <p>Any other suggestions?</p> <p><strong>Update 1/13 @ 9am</strong></p> <p>I've added this css and it helped a lot: <code><pre> .incoming *, .outgoing *{ -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0,0,0); /* This helps with the flicker a lot. */ } </code></pre></p> <p>The foreground elements don't seem to flicker anymore, but the backgrounds still do. Still looking for some help or helpful resources on Mobile Safari's memory handling tactics.</p> <p><strong>Update 1/16 @ 11pm</strong></p> <p>Increasing the z-index as suggested by anonymous. Didn't seem to make a difference.</p> <p><strong>Update 1/17 @ 8:30am</strong></p> <p>I've posted a demo of the problem <a href="http://projects.mediabounds.com/demos/flickering_demo/">here</a>.</p> <p>The transitions between screens work great...until you tap/click inside one of the form fields. After the keyboard slides up and returns, all the transitions flicker. Go to the URL inside the iOS simulator or on an actual iPad to see what I'm talking about.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload