Flickering in my iPad app while fading

I am buidling a iPad app / game with Phonegap, jQuery, etc.. The app is build out off sections and every section contains a few pages. When I hit the button, the current section or page fades out and the new one fades in. The fading is done in CSS for better performance.

On one page I have text box. When this text box is used and I click on the button to go to the next section the screen is flickering while fading. When I fade from page to page it doesn't flicker.

There is also an animation in the background of 400 x 400.

Button click:

1. Fade-out old Div
2. Hide old Div
3. Set opacity new Div to 0
4. unhide new Div
5. Fade-in new Div

The structure is something like this:

开发者_开发百科<div id="wrapper">
    <div id="section1">
        <span id="page1"><button>Go to page 2</button></span>
        <span id="page2">
                <button>Go to page 3</button>
                <input type="text"/>
        </span>
        <span id="page3"><button>Go to section 2</button></span>
    </div>
    <div id="section2">
        <span id="page1"><button>Go to page 2</button></span>
        <span id="page2"><button>Go to page 3</button></span>
        <span id="page3"><button>Go to section ..</button></span>
    </div>
</div>

Try adding this to all objects that are using animation:

-webkit-backface-visibility: hidden;

This determines whether or not an element is visible when it is not facing the screen and should fix your problem.

The backface-visibility property relates to 3D transforms. With 3D transforms, you can manage to rotate an element so what we think of as the "front" of an element no longer faces the screen. For instance, this would flip an element away from the screen:

CSS

.flip {
  -webkit-transform: rotateY(180deg);
  -moz-transform:    rotateY(180deg);
  -ms-transform:     rotateY(180deg);
}

It will look as if you picked it up with a spatula and flipped it over like a pancake. That's because the default for backface-visibility is visible. Instead of it being visible, you could hide it.

CSS

.flip {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);

  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:    hidden;
  -ms-backface-visibility:     hidden;
}

Demo