使用 CSS Blur 在 iPad 上滚动生涩

【问题标题】：Jerky scrolling on iPad with CSS Blur使用 CSS Blur 在 iPad 上滚动生涩
【发布时间】：2015-08-24 22:38:00
【问题描述】：

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

滚动在 iPhone 上运行良好（iOS 8 在 5+ 和 6 上测试过），但在 iPad 上它变得非常生涩和跳跃（iOS 在 2 和 3 mini 上测试过）。

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

【问题讨论】：

您的 iPad 设备是什么？我发现 iPad mini 第一代的 UI 性能真的很差。
我在 iPad 2 和 Mini 3 上测试过

标签： ios css ipad safari css-filters

【解决方案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 旨在用作最后的手段，以尝试处理现有的性能问题。它不应用于预测性能问题。

【讨论】：