Skip to main content

iphone webkit css animations cause flicker

Image
By User



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!


Labels:

Comments

  1. Tips For AllMarch 12, 2012 at 4:06 AM

    Try this, and hopefully it will help:

    #game {
    -webkit-backface-visibility: hidden;
    }

    ReplyDelete
  2. Tips For AllMarch 12, 2012 at 4:06 AM

    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.

    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;

    ReplyDelete
  3. Tips For AllMarch 12, 2012 at 4:07 AM

    body {-webkit-transform:translate3d(0,0,0);}

    ReplyDelete
  4. Tips For AllMarch 12, 2012 at 4:07 AM

    Michael'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.

    ReplyDelete
  5. Tips For AllMarch 12, 2012 at 4:07 AM

    Just a note to say that -webkit-backface-visibility: hidden; fixed the flicker on on Android 3.1 also.

    ReplyDelete

Post a Comment

Popular posts from this blog

Why is this Javascript much *slower* than its jQuery equivalent?

By User
I have a HTML list of about 500 items and a "filter" box above it. I started by using jQuery to filter the list when I typed a letter (timing code added later): $('#filter').keyup( function() { var jqStart = (new Date).getTime(); var search = $(this).val().toLowerCase(); var $list = $('ul.ablist > li'); $list.each( function() { if ( $(this).text().toLowerCase().indexOf(search) === -1 ) $(this).hide(); else $(this).show(); } ); console.log('Time: ' + ((new Date).getTime() - jqStart)); } ); However, there was a couple of seconds delay after typing each letter (particularly the first letter). So I thought it may be slightly quicker if I used plain Javascript (I read recently that jQuery's each function is particularly slow). Here's my JS equivalent: document.getElementById('filter').addEventListener( 'keyup', function () { var jsStart = (new Date).getTime()...
3 comments
Read more

Is it possible to have IF statement in an Echo statement in PHP

By User
Thanks in advance. I did look at the other questions/answers that were similar and didn't find exactly what I was looking for. I'm trying to do this, am I on the right path? echo " <div id='tabs-".$match."'> <textarea id='".$match."' name='".$match."'>". if ($COLUMN_NAME === $match) { echo $FIELD_WITH_COLUMN_NAME; } else { } ."</textarea> <script type='text/javascript'> CKEDITOR.replace( '".$match."' ); </script> </div>"; I am getting the following error message in the browser: Parse error: syntax error, unexpected T_IF Please let me know if this is the right way to go about nesting an IF statement inside an echo. Thank you.
5 comments
Read more