9

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 :/

Dan F
  • 11,958
  • 3
  • 48
  • 72
scooterlord
  • 15,124
  • 11
  • 49
  • 68
  • 2
    If you had this live (not jsfiddle, so we can try the actual site on iOS), people could check the link and you'd probably get the response you're looking for. If that's not possible, a jsfiddle is better than nothing. – Shawn Erquhart Oct 25 '13 at 04:12
  • I realize this, but unfortunately, I cannot share any information about the live site yet. I found a workaround for a moment (completely replaced the above action) but I would really like to know the solution about this. I have narrowed the problem to this: http://stackoverflow.com/questions/19469988/running-two-jquery-events-at-the-same-time-causes-flickering . It's what is causing the problem, running 2 functions at the same time – scooterlord Oct 25 '13 at 12:51
  • Does this issue appear on an actual iOS device or are you testing it in a desktop browser version? Please provide information about platform and browser where this issue appears. – damian Oct 28 '13 at 12:57
  • It appears on IOS7 on my iphone 4s. – scooterlord Oct 28 '13 at 14:12

6 Answers6

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.

codeaddict
  • 879
  • 5
  • 14
0

Have you considered using the animate function? It is possible to implement this such that the subsequent style changes will not take place until after the previous animation has completed. Obviously you could nest as many animations as necessary (I've only nested a couple below for illustrative purposes) which removes the problems occurring when multi-tasking. 

<style type="text/css">
    #elem1 {
    position:absolute;
    left:-1400px;
    z-index:1000;
    width:100%;
    }
</style>
<input id="btnA" type="button" value="Click Me" />
<div id="elem1">Element 1</div>
<div id="elem2">Element 2</div>
<script type="text/javascript">
    $('#btnA').click(function () {
        currentPos = $(window).scrollTop();
        $('#elem1').animate(
            { left: 0 }
            , {
                duration: 500
                , easing: "linear"
                , complete: function () {
                    $('#elem2').toggle(0);
                    $('#elem1').animate(
                        { top: 0 }
                        , {
                            duration: 0
                            , complete: function () {
                                $(window).scrollTop(0);
                            }
                        }
                    );
                }
            });
    });
</script>

References: http://api.jquery.com/animate/

talegna
  • 2,407
  • 2
  • 19
  • 22
0

not sure if this will help you but i had a similar issue with ios scroll animations. I solved it by using the scrollTo plug in and setting the axis eg:

$.scrollTo(target, 400, {offset:-60, axis:'y'});

this was the only thing I found that would stop the flicker.

Bn Mk
  • 164
  • 1
  • 13
0

My solution is not directly related but it includes both flickering fixed elements and scrollTop() so I'm sure Google will take someone here.

I put the animation in the step in stead of straight up animating the scrollTop property. Hope that helps.

var position_st = $(window).scrollTop();
var position_en = $(scroll_to_selection).offset().top;

$('#body-animator').stop().animate({
    textIndent: 100
}, {
    duration: 750,
    step: function(num) {

        var val = (num / 100 * (position_en - position_st)) + position_st;

        $('html, body').scrollTop(val);

    },
    complete: function() {

        $(this).css({
            textIndent: 0
        });

    }
});
Marcus
  • 230
  • 4
  • 8
0

Unfortunately the way the iOS processes element transitions is kinda weird. They "refresh" at the end of a scroll. The only way I know how to avoid this is with somewhat static elements such as nav bars or floating footers. Where they do not use any javascript or CSS to change the way they are presented. I know this isn't a solution but hopefully this helps you better understand the iOS webkit :)

werm098
  • 159
  • 1
  • 11
0

I wanted to scroll to the top of a page with 0ms animation, but it would most times give a flicker after the scroll - on ios 8.3. I went back to adding an animation of 400ms and ditched ScrollTo for this:

$('html, body').animate({
    scrollTop: 0
}, 400);

Getting 0 flicker now.. and a nicely animated scroll to the top of the page. 1000ms was jerky. hope this helps someone.

Craig from beerfriends.com
  • 1
  • 1