Fatal编程技术网
  • javascript/
  • Javascript CSS转换：iOS上的translateX flash错误

Javascript CSS转换：iOS上的translateX flash错误

javascript jquery ios css

Javascript CSS转换：iOS上的translateX flash错误,javascript,jquery,ios,css,Javascript,Jquery,Ios,Css,当单击元素时，我使用JS将CSS转换应用于.slider。我有它在Chrome、Safari和FF上工作，但在iOS（ipad）上，slider div没有滑动，只是闪烁。它可以正确地移动到应该移动的位置，但没有滑动过渡。它只是消失了几毫秒，然后在正确的位置重新出现 HTML 我曾尝试在所有.sliderdiv中添加冗余的3D变换，以使浏览器使用硬件加速，但没有帮助 .slider { -webkit-transform : translateZ(0); -o-transfor

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

HTML

我曾尝试在所有
.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）在某些元素上，但我已尝试删除它，但没有任何帮助


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


如果有帮助，这里有一个指向live应用程序的链接。

我通过编辑viewport meta标记修复了这个bug和许多类似的相关bug

最初，我的视口标记如下所示


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





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