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.
This is very interesting to me, because the way this “trick” is implemented isn’t really a trick at all. In fact, it’s one of the only implementations of the parallax effect that isn’t a trick. Parallax scrolling effects are intended to simulate depth by modifying the scroll behavior of various elements. In this implementation, all of that is sidestepped by simply making the depth “real.” So iOS 13 isn’t preventing this effect from working by fixing a mis-use of CSS transformations, rather it is actively breaking something that was, prior to now, being applied properly.
You said it right
Hear hear, this here is a big wtf
This is why we can’t have nice things…
isn’t it the other way around, that the z-translation makes it scroll with a different speed and then you have to correct it’s size by scaling it
Considering how buggy iOS 13 has been, I would bet that this is a bug in Safari, not a feature.
Sorry Chris, but 3D transforms are in fact is working draft. So… em… it is a little creepy (for me ^^’), but this is not a stable stage.
It’ll be the overflow properties on the parent container causing it.
I tried removing those and it scaled correctly again, though obviously the overflow properties are required to produce the parallax effect so can’t test it further.
Weirdly, it was the fact that this bug also existed in IE/Edge at one point (maybe it still does) that pointed me in this direction. I’m starting to think the “Safari is the new IE” crowd might have a point.
Is there workaround / fix for this yet?
i did not try the themes twentynineteen and twentytwenty. one question: do the themes twentynineteen and twentytwenty also have the so called parallax-effect!? Do they have parallax-capabilities!?
the twentytwenty-theme states: (at the wordpress-page):
Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. Complete editor styles give you a good idea of what your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the Customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors.
this is very impressive: the question to me is: do the themes twentynineteen and twentytwenty also have the so called parallax-effect!? Do they have parallax-capabilities!?
Hey there — neither theme includes parallax right out of the box (as far as I know) but parallax is something you can add, preferably in a child theme.
Come on Apple. You trying to piss off everyone!?