-
Notifications
You must be signed in to change notification settings - Fork 2.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Safari Parallax (demo and real-live code) looks super juggy #167
Comments
This seems to be a general issue on Safari (at least on Mac - iOS looks okay-ish). The http://janpaepke.github.io/ScrollMagic/ demo looks awful as well, which is a shame, 'cause it used to look so awesome! :o( Might be a recent Safari update. |
I'm seeing the same thing on Safari and Firefox. Chrome is fine. |
OS: OSX 10.9.5 |
Safari Version 7.1 (9537.85.10.17.1): Noticed problem pinning. Seems like the pinning spacer has some lag that could cause the judder. Making an element inside the pinned stuff fade in simultaneously made it smooth...? Could be Safari trying to optimise something, which gets a little too optimised. BTW: Is this a GreenSock issue rather than ScrollMagic? Update: |
I know what is causing this issue and was already made aware of it by @Ihatetomatoes. I don't want to get into this too much, but I already have an idea how to address this. I'll keep you posted. regards, |
Oh, and it's definitely not a GSAP issue. |
All right,I fixed it. Anyway: While I was at it, I also changed the parallax sections example. I will push the update in the next couple of days. |
The tickers and setTimeouts were removed and replaced by requestAnimationFrame. This should solve the „juggy" behavior described here: #167
go get it while it's hot. :) |
So its all nice and smooth used in that way. But on your demo you just have the backgrounds with no content in the sections. When you are adding elements that you dont want to move with the background into the section container, you have to either absolute position everything or you have to make the div containing your background image absolute and the other content relative so it overlays it. This method produces the jerky/juggy/jitteriness. Or am I missing something is there an easier way to have the moving background image with content overlayed and have the background image run smooth? |
If you have content in front of the parallax element, you should have it positioned absolutely and put it behind the other content either by DOM order or z-index. Please note, that there currently are some jitters reported for the parallax effect, and they are being reviewed: #256 If you're having trouble with the correct markup for this, please post this as a new issue, linking to a fiddle with the setup as far as you've gotten it. |
In your parallax sections demo the background image is positioned relatively. I have recreated your example and it works without jitters but when absolutely positioning the div with background image so to add content in front of it the jitters are quite bad. I will see if I can set up a fiddle. |
by the way a little offtopic but is there a short way to create a scroll effect like on http://www.apple.com/de/macos/sierra/ |
http://janpaepke.github.io/ScrollMagic/examples/advanced/parallax_sections.html
Your demo in safari...looks extremly jumpy/jiggy/whizzy or just unsmooth (butter smooth in chrome)
The text was updated successfully, but these errors were encountered: