Question

我有一个带有图像网格的页面，每个图像都有一个轻微的CSS模糊过滤器。

滚动在iPhone上运行良好（iOS 5在5+和6上测试）但是当它涉及到iPad时它会变得非常生涩并且跳跃（iOS测试2和3迷你）。

我尝试了“技巧”来强制iOS进入硬件加速，但这并没有解决问题。 -webkit-transform: translate3d(0, 0, 0);

Answer 1

我遇到了同样的问题，我解决了仅在适用于iOS设备的媒体上使用此属性的问题：

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ProductListItem-image-container  {
        -webkit-transform: translateZ(0);
        -webkit-perspective: 1000;
        -webkit-backface-visibility: hidden;
        transform: translateZ(0);
        perspective: 1000;
        backface-visibility: hidden;
    }
    .ProductListItem-blur {
        -webkit-backdrop-filter: blur(14px);
    }
}

此外，我的图片容器具有以下代码：

transform: translate3d(0, 10px, 0);
will-change: transform;

最后我在通用容器上的滚动出现了问题，所以我添加了：

 will-change: scroll-position;

重要提示：更改意志旨在作为最后的手段，以尝试解决现有的性能问题。不应将其用于预测性能问题。

使用CSS Blur在iPad上滚动

1 个答案: