Prinzhorn / skrollr

Stand-alone parallax scrolling library for mobile (Android + iOS) and desktop. No jQuery. Just plain JavaScript (and some love).
http://prinzhorn.github.io/skrollr/
MIT License
18.53k stars 3.51k forks source link

Skrollr degrading on on Retina Screen #856

Open peterlunglum opened 7 years ago

peterlunglum commented 7 years ago

I'm having trouble with using skrollr. I've used it several times and never ran into this problem before. I have images scaling and rotating from the center of the page as the user scrolls. It works fine on mobile and non-retina screens like older models of iMac and even cheaper screens from Dell. However, when I try to scroll through my site on my Macbook Pro screen, it slowss, flickers, and cuts off the images randomly.

Here's a zip of what I'm working with: WIP.zip

ghost commented 7 years ago

iOS has many unsolved repaint issues related to transforms, position: fixed and some property combinations. I can't really test it right now, but I would try several things. Try not using position: fixed on each layer, rather have one fixed layer big as the viewport and position each of your scenes inside of it absolutely. Don't use relative viewport units vw vh anywhere, scale to 100% from html instead. Don't scale from 0, rather from 0.01 or a minimal value. Try not using image tags, but rather elements where the images are added as a background-image. If none of that works, let me know and I can take another look when I get my hands on the Mac abomination again.