ios - 使用 CSS 模糊在 iPad 上滚动

Question

我有一个包含图像网格的页面，其中每个图像都有轻微的 CSS 模糊滤镜。

滚动在 iPhone 上运行良好(iOS 8 在 5+ 和 6 上测试过)但是当涉及到 iPad 时，它变得非常不稳定并且跳来跳去(iOS 在 2 和 3 mini 上测试过)。

我尝试了强制 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;

重要提示:will-change 旨在用作最后的手段，以尝试处理现有的性能问题。它不应用于预测性能问题。