iOS 13 Broke the Classic Pure CSS Parallax Technique


I know. You hate parallax. You know what we should hate more? When things that used to work on the web stop working without any clear warning or idea why.

Way back in 2014, Keith Clark blogged an exceptionally clever CSS trick where you essentially use a CSS transform to scale an element down affecting how it appears to scroll, then “depth correcting” it back to “normal” size. Looks like we got five years of fun out of that, but it’s stopped working in iOS 13.

Here’s a video of official simulators and the problem:

  • Amelia says “3D transforms are not a stable spec” which frightens me. Aren’t they unprefixed?
  • iOS 13 also broke “scroll shadows” because apparently they are caching scrolled views or something?
  • Adam made a whole thing around this concept, and I’m sure he’s not alone.

I’d like to raise my hand for un-breaking this. If we don’t watchdog for the web, everything will suffer.