jquery element flicker after transition and scrolltop on ios

Question

well, this is going to be tough... hope the gurus come up with a solution!

This is tough to explain, but here goes..

I have two elements:

<style>
#elem1 {
position:absolute;
left:-1400px;
z-index:1000;
width:100%;
}
.anim {
  -webkit-transition: -webkit-transform 0.5s ease;
  -moz-transition: -moz-transform 0.5s ease;
  -ms-transition: transform 0.5s ease;
  -o-transition: -o-transform 0.5s ease;
  transition: transform 0.5s ease;
}
.overr {
  transform:translate(1400px,0);
  -ms-transform:translate(1400px,0); 
  -webkit-transform:translate(1400px,0);
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}  
</style>
<script>
$('#btn a').click(function(){
 currentPos = $(window).scrollTop();
 $('#elem1).toggleClass('overr');
 $('#elem1).attr('style', 'top:' + currentPos + 'px;');

 setTimeout(function() {
  $('#elem2').toggle(0);
  $('#elem1').attr('style', 'top:0');
  $(window).scrollTop( 0 );
  }, 500)
});
</script>

<div id="elem1" class="anim">content here</div>
<div id="elem2">content 2 here></div>

What I am trying to achieve here is this: Element 2 is not styled at all, just a plain element. Clicking the button, gets #elem2 position, brings #elem1 like a drawer from the left so that it's top is at the current position of the screen, #elem2 is then hidden, #elem1 goes to top and screen scrolls up.

The result is, that I am on the same page, load a whole different content on top of the bottom one, I can scroll without overscroll (which is DESPERATELY needed on the iphone - moves away the top and bottom bars - actually this is the reason I need this).

PROBLEM:

The problem is that the screen flickers at the last $(window).scrollTop( 0 ) - the damn screen flickers. If I initiate the script at the top of the page, it doesn't flicker.

a) I tried changing the order of the script, but changing things don't give me the needed results. b) Changing the transition effect to 'linear' makes this better, but you can still see it.

I know this thing is tough, but hopefully someones help me with this!

edit: What it looks like is that $('#elem2').toggle(0) and $(window).scrollTop( 0 ) trigger at the same time, so in the instant it flickers looks like it also brings #elem2 at the top, that's why it flickers... :/ I wasted like 4 hours on this so far :(

edit2: even removing completely the animated transitions, still does the flicker. off I go to sleep, can't stay awake any longer.. hopefully I get a morning present :/

Answer 1

If it's a white flash, this is actually a css3 issue. I've had this happen in the past, try to add this.

-webkit-transform-style: preserve-3d;

to both the .anim and .overr classes.