javascript - CSS 变换 : translateX flash bug on iOS

Question

当单击元素时，我正在使用 JS 将 CSS 转换应用于 .slider。我让它在 Chrome、Safari 和 FF 上工作，但在 iOS (ipad) 上， slider div 没有滑动，它只是闪烁。它正确地移动到它应该的位置，但没有幻灯片过渡。它只是消失了几毫秒，然后重新出现在正确的位置。

HTML

<div class="slider" style="-webkit-transform: translateX(0); transform: translateX(0);"></div>

JS

$('.right-arrow').click(function() {
    var slider_margin = parseInt($(this).closest('.slider').css('transform').split(',')[4]);
    var new_margin = slider_margin - pane_width;
    $(this).closest('.slider').css('-webkit-transform','translateX('+new_margin+'px)');
});

我已经尝试向所有 .slider div 添加冗余 3D 转换，以使浏览器使用硬件加速，但这没有帮助。

.slider {
    -webkit-transform : translateZ(0); 
    -o-transform : translateZ(0); 
    -moz-transform : translateZ(0); 
    transform : translateZ(0);
}

其他可能的原因是我在某些元素上使用了 -webkit-tap-highlight-color:rgba(0,0,0,0); 但我已经尝试删除它并且它没有帮助。

如果有帮助，请点击此处链接到实时应用程序。 http://taxhug.herokuapp.com/quiz

Answer 1

我通过编辑视口(viewport)元标记修复了这个错误和许多类似的相关错误。

最初，我的视口(viewport)标签是这样的

<meta name="viewport" content="width=device-width, initial-scale=1>

现在是这个样子

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0">