Jerky scrolling on iPad with CSS Blur

Question

I have a page with a grid of images where each have a slight CSS blur filter over them.

The scrolling works fine on iPhones (iOS 8 tested on 5+ and 6) but when it comes to iPad it gets really jerky and jumps around (iOS tested on 2 and 3 mini).

I tried the "trick" to force iOS into hardware acceleration but this didn't fix the issue. -webkit-transform: translate3d(0, 0, 0);

Answer 1

I had the same issue, I solved using this properties only on a media that applies to iOS devices:

@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);
    }
}

Also, my image container had a this code:

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

And finally I had issues with the scroll on the general container so I added:

 will-change: scroll-position;

Important: will-change is intended to be used as a last resort, in order to try to deal with existing performance problems. It should not be used to anticipate performance problems.