CSS3转换在iOS慢/不工作

我想开始使用一些CSS3转换在我做的响应网站上，一切工作完美的桌面Chrome和Android上的Chrome，但它不能在ios设备上正常工作的两个Chrome和Safari。CSS3转换在iOS慢/不工作

的CSS代码段我用我的菜单，例如，低于：

#menu { 
width: 180px; 
height: 100%; 
position: fixed; 
top: 0; 
left: -180px; 
z-index: 9; 
transition: left 1s; 
-webkit-transition: left 1s; 
}

我有一个菜单按钮，点击后，调用JavaScript函数，改变了“左”的风格0，它从屏幕左侧的外侧过渡到位置。

一切工作正常在台式机和Chrome Android上，但在iOS和Chrome浏览器它是非常不连贯或它只是延迟一秒钟，然后立即弹出。在我所有的转换中都是这样做的，但为了简单起见，我只显示一个菜单。

我已经做了google搜索，并通过堆栈寻找，但我真的发现的唯一的事情说了很多，以添加以下内容：

-webkit-backface-visibility: hidden; 
-webkit-perspective: 1000; 
-webkit-transform: translate3d(0, 0, 0);

的风格给力的硬件加速，但它不工作要么。我看不出有任何改变。任何帮助，将不胜感激。

2016-10-22 Jetteh22

避免的，而不是尝试使用'变换：平移X（0）'用于水平调整 – Swordys

@Swordys我会给你一张支票。我之前并没有真正与'变形'混为一谈，因为直到最近我还没有真正尝试过渡，尤其是不适合移动。我也有同样的问题，不断变化的/不工作的元素，不改变定位，但有最大高度和不透明度的过渡。对所有人使用变换最好吗？ – Jetteh22

是的，如果你在绝对元素上使用很多转换，它会对性能产生很大的影响。使用转换是顺畅体验的最佳实践。您还可以尝试使用'will-change：transform'来强制硬件加速，但目前Safari浏览器不支持它。 – Swordys

避免使用它需要大量资源的绝对定位的转变，而不是尝试使用它需要大量资源的绝对定位的转换使用transform: translateX(0)进行水平调整

2016-10-22 21:24:32 Swordys

这对菜单非常适用。任何关于如何获得'transition：max-height 1s，opacity 1s'的建议不会波涛汹涌！我似乎无法找到不透明度或最大高度的变换。 – Jetteh22

您是否尝试过在秒针指示器之后使用任何转换计时功能（如“缓出”或“缓动”）？ – Swordys

我尝试过使用'缓入式'，'缓和'和'线性'，这是一回事。我只是做了一个快速测试，这是'max-height'的转换，它有问题。 “不透明度”过渡很平稳，但当我尝试转换“最大高度”时，它就是跳跃式的。我正在做的是解决方法转换到'height：auto;'因为这是行不通的。 – Jetteh22

回答