CSS 转换：iOS 上的 translateX flash 错误答案

【问题标题】：CSS transform: translateX flash bug on iOSCSS 转换：iOS 上的 translateX flash 错误
【发布时间】：2014-02-17 14:51:32
【问题描述】：

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

HTML

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

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

【问题讨论】：

标签： javascript jquery ios css

【解决方案1】：

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

最初，我的视口标签看起来像这样

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

【讨论】：