This is the iphone site: http://www.thevisionairegroup.com/projects/accessorizer/site/
After you click "play now" you'll get to a game. The guns will scroll in. You can scroll the purse and accessories up and down. You can see that when you let go they snap into place. Just as that snap happens, there's a flicker that occurs. The only webkit animations I'm using are:
'-webkit-transition': 'none'
'-webkit-transition': 'all 0.2s ease-out'
'-webkit-transform': 'translate(XXpx, XXpx)'
I choose either the first or second transition based on whether or not I want it to animate, and the transform is the only way I move things around.
The biggest issue though is when you click "Match items", then click "Play again". You'll see as the guns animate in, the entire background of the accessories/purses goes white. Can someone please radiate me with some insight asto why this is happening??
Thanks!
Try this, and hopefully it will help:
ReplyDelete#game {
-webkit-backface-visibility: hidden;
}
I added -webkit-backface-visiblity and that mostly helped, but I still had an initial flicker after reloading the page. When I added -webkit-perspective: 1000, there was no flicker whatsoever.
ReplyDelete-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
body {-webkit-transform:translate3d(0,0,0);}
ReplyDeleteMichael's answer -webkit-backface-visibility: hidden; worked when we hit this problem. We had translateZ(0px) on our <body> tag to prevent an iOS 3.1.3 and earlier IFRAME boundary bug and it caused anims to flicker. Adding -webkit-backface-visibility: hidden; to each element we animated fixed the flicker! Life saver.
ReplyDeleteJust a note to say that -webkit-backface-visibility: hidden; fixed the flicker on on Android 3.1 also.
ReplyDelete