ipad - -webkit-转换 :translate blocky render on iPad

Question

所以我知道 translate/translate3d 使用 GPU，但出于某种原因，它会导致大型图形在 iPad 上以 block / block 的形式呈现。使用翻译时，我很难找到说明图像最大宽度/高度的任何地方。

我希望能够在 transform 属性上使用 css transitions，但由于这个问题不能。即使是“top”属性上的 css 转换也比使用 jQuery.animate() 之类的东西执行得更慢。

对此有何建议？

Answer 1

我遇到了完全相同的问题，并且使用这个小 CSS gem 取得了很大的成功:

-webkit-backface-visibility: hidden;

我发现将此添加到任何正在动画化的元素都可以解决“ block 状”渲染。在某些情况下，我还必须将它添加到子元素中，例如。我有一个大包装 div 并使用 translateX 来调整 x 位置。我将神奇的 CSS 行添加到包装器 div，以及该 div 的直接子级(这是我的内容区域)。试一试，希望您能解决问题!