Overflow: auto + translateZ prevents page scrolling
Here is a screencast demonstrating the following problem:
https://www.youtube.com/watch?v=SUGgtWAtsLQ
I am creating a web application that targets mobile devices. I have a layout with multiple horizontal stripes of images with overflow: auto
that can be scrolled horizontally. So far so good - but when you scroll vertically the jank is noticeable .
To fix this, I apply transform: translateZ(0);
stripes to the line to force a composting layer that really fixes the jank.
The main drawback is that once I have done this, it is no longer possible to vertically scroll the page when starting scrolling on one of the stripes .
How can I overcome this while remaining ruthless?
Corresponding code: http://codepen.io/OpherV/full/zGMrwo (Run in chrome emulation mode, landscape orientation)
Edit: looks like the latest version of chrome on desktop has fixed this bug, but it remains on mobile
source to share
On iOS devices, you can flatten it using:
translate3d(0,0,0).
This allows the browser to use iOS hardware acceleration.
Idea found on Paul Irish site and suggested by Remy Sharp (video) (not found on Remy Sharp website yet ):
source to share