I have a section on my page with 3 layers of graphical content (currently R + G +B verions of a graphics for testing)
I offset the “rear” plane negative -> positive values on Y and the “foreground” layer to positive -> negative values on scroll.
The interaction works fine on most browsers and at different size screens, BUT it is miss-aligned in chrome on mobile (iOS) and windows Desktop.
Am I using the right technique to achieve this? or should I try another way?
The page : https://a-l-a-n.webflow.io/rebuild-parallax (should be a square section filled with red and layers behind it.
Appreciate any pointers or tips.
Here is my public share link: https://preview.webflow.com/preview/a-l-a-n?utm_medium=preview_link&utm_source=designer&utm_content=a-l-a-n&preview=a8fb30a2d111295930ce1a54d18229ea&pageId=5f6a940b40f1374423dd6fed&mode=preview