ScrollTrigger pin with DVH CSS units

[Web Bae]

Hi!

I'm using ScrollTrigger pin on an element that has height set to 100dvh. I noticed that when the url bar goes away, the pin element doesn't update it's height, leaving an undesired blank space. Is this possible to fix? Am I doing something wrong here?

I provided a minimal codepen, but I'm not sure that will trigger the behavior on mobile as scrolling in the pen doesn't trigger the url bar in/out. Is there a better way to share minimal demos with issues on mobile?

Here's the hosted site you can load on mobile to see the issue with 100dvh: https://fixed-image-gallery.webflow.io/en/test-mobile

For now, changing to 100vh is a good fix but I'm wondering if there's something that can be done to work with dvh?

Thanks! Keegan

See the Pen WNWMoPe by learyjk (@learyjk) on CodePen

[Rodrigo]

Hey Keegan!

 

You can share the debug URL:

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

 

Is using ScrollTrigger normalizeScroll an option here?

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll()

if (ScrollTrigger.isTouch === 1) {
  ScrollTrigger.normalizeScroll(true);
}

Other than that honestly IDK, using SVH doesn't change a thing I'm afraid, maybe some of the CSS wizards around here can come up with something that clearly eludes me right now.

 

Hopefully this helps.

Happy Tweening!

[GreenSock]

Not sure if this is helpful to you or not, but: 

 

ignoreMobileResize is true by default in recent versions, but it sounds like maybe you actually want it to be false(?) so that ScrollTrigger.refresh() gets called when the window resizes on mobile. Is that correct? 

ScrollTrigger.config({ ignoreMobileResize: false });

Or of course you can call ScrollTrigger.refresh() manually anytime, so wire it up however you please.