jquery 元素在 ios 上过渡和滚动后闪烁

Question

好吧，这会很难......希望大师们想出一个解决方案!

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

我有两个元素:

<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:即使完全移除动画过渡，仍然会闪烁。我去 sleep 了，再也睡不着了..希望我能得到一份早上的礼物:/

Answer 1

如果是白闪，其实是css3的问题。我过去发生过这种情况，请尝试添加。

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

.anim 和 .overr 类。