CSS iPhone - Choppy Scrolling in Chrome

Hey Folks,

Has anyone seen this strange scrolling behavior before? On page load, an iPhone animates into view and you can scroll within the iPhone. This was really fun to build all in CSS! It works fine in Safari and Firefox, and it worked a few months ago in Chrome, but now the scroll is choppy in Chrome.

Any feedback would be appreciated. Thanks! Max


Here is my site Read-Only: https://preview.webflow.com/preview/iphone-test-2?preview=1c5bd4e5f00e0278854fe0dd015cd32a

Not choppy at all for me but there’s a visual glitch.

Very easy to fix. The layer where the content of the screen (scrollable) sits is too close to what’s underneath. Make it move 1px perpendicularly to the phone and you’ll avoid this glitch.

Wow! Thanks @vincent! That did the trick. I just raised the z-index. Is that what you had in mind? Do you know what causes this? I’ve never heard of such a thing. Cheers!

I actually avoid mixing 3D transform and z-index. I was suggesting moving it up 1px on the z axis with a 3D transform (on the local axis/reference of the phone of course).

It happens because when a computer draws different pixels that are supposed to be at the same place, the last pixel drawn wins. (kinda) It’s easier for a browser to pile up elements in 2D than in 3D. In 3D suddenly the z axis makes a different sense.

1 Like

Very cool. Thanks @vincent. I appreciate the knowledge!

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.