ios上的过渡和滚动后jquery元素闪烁答案

【问题标题】：jquery element flicker after transition and scrolltop on iosios上的过渡和滚动后jquery元素闪烁
【发布时间】：2013-10-27 23:35:46
【问题描述】：

好吧，这将是艰难的......希望大师们提出解决方案！

这很难解释，但这里是..

我有两个元素：

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

我想在这里实现的是：元素 2 根本没有样式，只是一个普通的元素。单击按钮，获得#elem2 位置，将#elem1 像抽屉一样从左侧拉出，使其顶部位于屏幕的当前位置，然后隐藏#elem2，#elem1 到顶部并且屏幕向上滚动。

结果是，我在同一页面上，在底部的顶部加载完全不同的内容，我可以滚动而不会过度滚动（这在 iphone 上非常需要 - 移开顶部和底部栏 - 实际上这就是我需要这个的原因）。

问题：

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

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

我知道这件事很难，但希望有人能帮我解决这个问题！

edit：看起来像 $('#elem2').toggle(0) 和 $(window).scrollTop(0) 同时触发，所以在它闪烁的瞬间看起来它也带来了#elem2 在顶部，这就是它闪烁的原因...：/ 到目前为止，我在这上面浪费了大约 4 个小时 :(

edit2：即使完全删除动画过渡，仍然会闪烁。我去睡觉了，不能再保持清醒了..希望我能得到一份早间礼物：/

【问题讨论】：

如果你有这个直播（不是 jsfiddle，所以我们可以在 iOS 上尝试实际的网站），人们可以检查链接，你可能会得到你正在寻找的响应。如果这不可能，一个 jsfiddle 总比没有好。
我意识到这一点，但不幸的是，我还不能分享有关现场网站的任何信息。我暂时找到了一种解决方法（完全取代了上述操作），但我真的很想知道有关此的解决方案。我已将问题缩小到：stackoverflow.com/questions/19469988/…。这是导致问题的原因，同时运行 2 个功能
此问题是否出现在实际的 iOS 设备上，或者您是否在桌面浏览器版本中进行测试？请提供有关出现此问题的平台和浏览器的信息。
它出现在我的 iphone 4s 上的 IOS7 上。

标签： jquery iphone ios css flicker

【解决方案1】：

您是否考虑过使用动画功能？可以实现这一点，以便在前一个动画完成之前不会发生后续样式更改。显然，您可以根据需要嵌套尽可能多的动画（出于说明目的，我只在下面嵌套了几个），这消除了多任务处理时出现的问题。

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

参考：http://api.jquery.com/animate/

【讨论】：

是的，我试过了；虽然它在桌面上运行良好，但在 iphone 上我得到相同的闪烁：/

【解决方案2】：

不确定这是否会对您有所帮助，但我在 ios 滚动动画方面遇到了类似的问题。我通过使用 scrollTo 插件并设置轴来解决它，例如：

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

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

【讨论】：

【解决方案3】：

我的解决方案没有直接关系，但它包括闪烁的固定元素和 scrollTop()，所以我确信 Google 会在这里找人。

我将动画放在步骤中，而不是直接为 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
        });

    }
});

【讨论】：

【解决方案4】：

不幸的是，iOS 处理元素转换的方式有点奇怪。他们在卷轴的末尾“刷新”。我知道如何避免这种情况的唯一方法是使用一些静态元素，例如导航栏或浮动页脚。他们不使用任何 javascript 或 CSS 来改变他们的呈现方式。我知道这不是一个解决方案，但希望这可以帮助您更好地理解 iOS webkit :)

【讨论】：

【解决方案5】：

如果是白闪，这其实是css3的问题。我以前也遇到过这种情况，请尝试添加。

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

同时适用于 .anim 和 .overr 类。

【讨论】：

【解决方案6】：

我想滚动到具有 0 毫秒动画的页面顶部，但大多数时候滚动后会闪烁 - 在 ios 8.3 上。我回去添加一个 400 毫秒的动画并为此放弃了 ScrollTo：

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

现在闪烁为 0 .. 并且动画很好地滚动到页面顶部。 1000 毫秒是生涩的。希望这对某人有所帮助。

【讨论】：