Question

当点击一个元素时，我正在使用JS将CSS变换应用于.slider。我有它在Chrome，Safari和FF上工作，但在iOS（ipad）上，滑块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标签看起来像这样

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

CSS转换：iOS上的translateX flash bug

1 个答案: