TheSylvester

I may have found a fix to the problem simply by setting overflow-x: clip Just leaving that here in case someone else runs into this.

I've learned much from the articles and issues you've pointed out, and in my React code I am now using matchMedia for the context and proper cleanup in my useEffect. I was able to recreate the problem in plain javascript embedded in an html file, see the attached test file. Kindly run it in Chrome, in F12 dev tools select iPhone SE, go to page 2, and change the orientation two or three times, and you'll see it evidenced in the console log (the reported size is incorrect) and when you flip back to page 1. (edit: it's specifically when you're on page 2 with the tagline in horizontal mode, then flip the orientation to vertical) I have no idea where to put revert or cleanup code in a plain javascript, but I'm almost sure that has nothing to do with it. This has been driving me nuts and I thought I was losing my mind, or just really bad at this. But I'm now convinced it's not me. test.html

The only thing I can think of is maybe the PRO Live mode in CodePen might do it? The behaviour only happens in Chrome, and might have something to do with how Chrome will stretch out the layout viewport (and make 100vw / window.innerWidth NOT the width of the window, but instead of the width [or height] of all your elements) if you have any items pushed outside the window bounds on an orientation shift or large resize (like a maximize), so you can cause window.innerWidth to end up being larger than window.outerWidth to hillarious results. Firefox does not do this. I suspect the bad behaviour won't happen inside any sort of sandboxed environment because it's contained in a frame, which is why I suggested maybe Live [PRO] mode, which I don't have access to. On my part I will work with the React cleanup and gsap.context and see if it improves the situation.

I'm trying to make a super simple behaviour and found that Chrome is breaking ScrollTrigger scrub revert positioning on maximize / some resizing. Everything looks perfect in Codepen, but when I launch it from Webstorm and view it on Chrome, resize, and especially maximize, causes crazy behaviours like remembering the wrong initial values, etc. Sometimes the values are so off the element disappears. I've tried everything from ScrollTrigger.clearMemory() to invalidateOnRefresh, added a 500ms setTimeout to the resize (I've tried without), removing the initial CSS transforms and using a gsap.set at the beginning of my useEffect, using a .fromTo() with the initial transform in the from var, and any combination of the above through exhaustive googling for 2 days now. The only thing I can do is to window.location.reload() on resize which totally works but I'm not really sure if that's the best way forward here because I wonder if that will just completely mess with iOS as I heard it calls resizing on just a normal scroll (I don't own an iPhone). I know it's weird to troubleshoot since Codepen works, but if someone could send me in the right direction, or kindly take the time to verify this outside of Codepen and let me know I'm not crazy?