iOS 8 Safari - 高度过渡生涩

【问题标题】：iOS 8 Safari - Height Transition jerkyiOS 8 Safari - 高度过渡生涩
【发布时间】：2014-12-04 03:45:35
【问题描述】：

我有一个 ul 元素，它应该在点击时展开。我为此使用 CSS 过渡。单击时，Javascript 会分配“select_ul_open”类。这些是相关的样式属性：

.select_ul { 高度：0px；可见性：隐藏；过渡：高度 0.4s 三次贝塞尔曲线（0.5, 0, 0, 1.000），可见性 0s 线性 0.4s； } .select_ul.select_ul_open { 高度：320px；能见度：可见；过渡：高度 .4s 三次贝塞尔曲线（0.5, 0, 0, 1.000），可见性 .4s 线性 0s； }

它适用于所有常见的桌面浏览器。然而，它在 iOS Mobile 或 Android 浏览器上是生涩的。人们告诉我添加

tratranslate3d(0px,0px,0px) 到我的代码，它激活了硬件加速，但对高度转换不起作用。

我还尝试使用 jQuery 使其淡入。有趣的是，它适用于 iOS，但不适用于 Chrome 等桌面浏览器。

这个问题有没有通用的解决方案？如果没有，有没有其他方法可以实现平滑的淡入过渡？

干杯，大卫

【问题讨论】：

标签： jquery ios css

【解决方案1】：

不知道你是否已经解决了这个问题，但这里有一些事情可以尝试：

将“overflow-y: hidden”添加到“.select_ul {”
完全删除“可见性”
转换只能建立一次，用于“.select_ul {”而不是“.select_ul_open”

所以，你的代码应该是：

.select_ul {
    height: 0px;
    transition: height .4s cubic-bezier(0.5, 0, 0, 1.000);
}
.select_ul.select_ul_open {
    height: 320px;
}

如果还是不行，试试用“linear”替换transition timing-function：

.select_ul {
    height: 0px;
    transition: height .4s linear;
}
.select_ul.select_ul_open {
    height: 320px;
}

另外，我确定这只是 stackexchange 的错字，但值得指出：

tratranslate3d(0px,0px,0px)

应该是：

transform: translate3d(0px,0px,0px);

...但无论如何，这确实不应该是必需的。希望这会有所帮助。干杯！

【讨论】：