Jump to content
GreenSock

Carl

Safari iOS hides pinned div in odd pinning scenario

Recommended Posts

I came up with this setup where the first panel scrolls up to reveal pinned content beneath it

 

GOOD CODEPEN EMBEDDED AT BOTTOM OF PAGE

 

Basically once you scroll down the full height of the page the stuff underneath the blue panel gets unpinned and moves up.

 

I'm not 100% sure it's the best way to approach the html / css but it works and I'm implementing this on a site where I may not have control over all the html.

 

However, when I add a scrubbed animation to this setup of the word "one" spinning while elements are pinned, Safari totally glitches out when I scroll up the page (making the blue section renter from the top of the viewport).

 

Notice in the video below the red section completely disappears w and reappears when the scrolling stops.

 

Open the following demo in debug mode on your device to test.

 

https://cdpn.io/pen/debug/QWrRoVr

 

I've tried a few will-change:transform and force3D:true/false things to no avail.

 

Again the only difference between the good demo posted below and the bad one is that the animation of the word "one" spinning is enabled. I'm seeing the glitch on iOS 15.6.1. On desktop it works fine.

 

thanks for the help.

 

Carl

 

See the Pen XWqwLXP by snorkltv (@snorkltv) on CodePen

Link to comment
Share on other sites

Very interesting. So it looks like a very strange rounding thing that iOS is doing when it reports positioning - it's like 0.0002 off. This only seems to happen when you omit this tag from the <head> (which is quite standard for iOS): 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

AND your pinning element must have had a transform applied (in your case, -100vh). 

 

I believe I've worked around it effectively in the latest beta: 

https://assets.codepen.io/16327/ScrollTrigger.min.js

 

But honestly, I'd recommend putting that meta tag in your project anyway. That'd fix it even without the beta. 

 

Thanks for reporting this, Carl. 

  • Like 1
Link to comment
Share on other sites

Thanks so much for the thorough deep dive. Can't imagine what it was like to track that stuff down.

 

In case it helps others, i was pleased to learn that CodePen offers the ability to add that meta tag with an easy button.

 

meta.thumb.png.737d49d9b685e3909355f7c2b0206059.png

 

I deeply regret to report though that I tried with the meta tag and new beta and although the glitch is by far less frequent, I can still manage to get it to occur. 

 

I thought it may have only been happening with fast scrolls but fastScrollEnd:true didn't seem to help. 

I also tried normalizeScroll().

 

Here is a video of a forked pen with those changes

 

 

Here is the debug mode version

 

here is the full editor version

 

See the Pen GRdVNWY?editors=1010 by snorkltv (@snorkltv) on CodePen

 

I appreciate all the help. 

 

 

 

 

Link to comment
Share on other sites

slight update

 

it seems using ScrollTrigger.normalizeScroll(true) helps to alleviate the glitch a bit, but not 100%.

 

 

 

  • Like 1
Link to comment
Share on other sites

Okay, here are my findings: 

  1. There was one other place I needed to accommodate for that funky rounding that the browser was doing, but...
  2. Safari has some funky rendering bugs when you set BOTH the parent AND a child element to will-change: transform (at least if you've got a gradient background). The rendering of the elements lags behind (sometimes significantly, like until the scroll stops). Again, it has absolutely nothing to do with ScrollTrigger/GSAP - this is purely a browser rendering bug. Solution: only set the parent -OR- child (not both) to will-change: transform. 

Can you please try the latest beta and tweak your will-change and confirm that you can no longer reproduce any issues? Here's my fork that seems to work well: 

See the Pen eYrqNaE?editors=1010 by GreenSock (@GreenSock) on CodePen

  • Like 2
Link to comment
Share on other sites

I am very pleased to report that I followed your instructions and everything looks GREAT on this end.

 

No glitching at all. Silky smoothe up and down.

 

Thanks so much for going the many extra miles.

 

I can't believe that this was somewhat related to a gradient/will-transform combo. Good grief. 

 

Thank you thank you thank you!

 

 

 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×