转换后的jquery元素闪烁和ios上的scrolltop

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.

我想在这里实现的是:元素2根本没有样式,只是一个简单的元素。单击按钮,获取#elem2位置,将#elem1从左侧带入抽屉,使其顶部位于屏幕的当前位置,然后隐藏#elem2,#elem1返回顶部,屏幕向上滚动。

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).

结果是,我在同一页面上,在底部加载了一个完全不同的内容,我可以滚动而不会过度滚动(这在iPhone上需要很多 - 移开顶部和底部的条形 - 实际上这是我之所以需要这个)。

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.

问题是屏幕闪烁在最后的$(窗口).scrollTop(0) - 该死的屏幕闪烁。如果我在页面顶部启动脚本,它不会闪烁。

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.

a)我尝试改变脚本的顺序,但改变的东西并没有给我所需的结果。 b)将过渡效果更改为“线性”会使这更好,但您仍然可以看到它。

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

编辑:它看起来是$('#elem2')。toggle(0)和$(window).scrollTop(0)同时触发,所以在瞬间它闪烁看起来它也带来#elem2 at顶部,这就是为什么它闪烁......:/我到目前为止浪费了4个小时:(

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

edit2:即使完全删除动画过渡,仍然会闪烁。我睡觉了,不能再保持清醒了......希望我早上有礼物:/

6 个解决方案

#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.

如果它是白色闪光,这实际上是一个css3问题。我过去曾经发生这种情况,试着加上这个。

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

to both the .anim and .overr classes.

.anim和.overr类。

#2

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/

#3

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:

不确定这是否会对你有所帮助,但我对ios滚动动画有类似的问题。我通过使用scrollTo插件并设置轴来解决它,例如:

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

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

这是我发现的唯一可以阻止闪烁的东西。

#4

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

我的解决方案没有直接相关,但它包括闪烁的固定元素和scrollTop()所以我相信谷歌会把某人带到这里。

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

我将动画放在步骤中,而不是直接设置scrollTop属性的动画。希望有所帮助。

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
        });

    }
});

#5

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

不幸的是,iOS处理元素转换的方式有点奇怪。它们在滚动结束时“刷新”。我知道如何避免这种情况的唯一方法是使用某些静态元素,如导航栏或浮动页脚。他们不使用任何JavaScript或CSS来改变他们的呈现方式。我知道这不是一个解决方案,但希望这有助于您更好地理解iOS webkit :)

#6

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:

我想用0ms动画滚动到页面的顶部,但是在滚动后的ios 8.3上大多数时间都会闪烁。我回去添加一个400ms的动画并抛弃了ScrollTo:

$('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.

现在获得0闪烁..以及一个精美的动画滚动到页面顶部。 1000毫秒是生涩的。希望这有助于某人。