zbr_creator

Gotcha, thanks! We tried a similar fix of applying transform: translateZ(0) that fixed on some devices but not all. We will try yours next round. Vexing! Crazy that this sort of issue persists in modern browsers.

Thank you @Rodrigo! Full Pen and debug link just added. Moving to Banner Animation is fine if you think that would get answers, but it seemed more like a general GSAP question to me, as all the banner workings are pretty standard as far as I know. But I defer to your advice!

Working on getting resources linked for a functional CodePen.

Hi all! Working on some banner animation and running into a very weird issue where on certain iOS/MacOS platform/browser combos like: macOS Monterey (12.6.5) - Safari macOS Monterey (12.2.1) - Safari iPhone 14 Pro Max (17.0.2) - Safari iPhone 11 (17.0.1) — Chrome, Safari iPhone 15 (17.0.2) — Chrome, Safari iPhone 14 Pro Max (17.0.2) — Chrome, Safari iPhone 13 Pro Max (17.2.1) — Chrome, Safari The animation seems to not complete or to pause before completing, or does not display as complete, and the end of the experience. See attached (goofy, minimum working/redacted example, index file inside): aniFixTester.zip Full pen below. https://codepen.io/zachblackandred/pen/NWJwYpQ Debug: https://cdpn.io/pen/debug/NWJwYpQ?authentication_hash=gaAeYgnOWLnA What I expect to happen: The full animation to play, including fully displaying the opacity fade-on animation of the final element, the text "FINAL TEST ASSET". See full intended animation here, noting full fade-on animation of "FINAL TEST ASSET", recorded on Chrome for MacOS: https://shot.blackandred.io/QwuXloKj What happens on the above platforms: The animation pauses or appears to pause just before the end, with the final element "FINAL TEST ASSET" animating its opacity very slightly on, or not on at all. When the user scrolls the page or taps on the page, the asset finally appears at full opacity. If the user refreshes the page, the full final appearance briefly flashes on before the refresh goes through. See example here: https://shot.blackandred.io/yAuBYzLm What I've tried as a fix: Firing a single setTimeout event with an .add function in the timeline after the final element's animation code, intending for it to force browser to redraw the screen — no dice The fact that messing with the page makes the dim/missing asset fully appear makes us suspect this is a browser draw cycle issue, but we're baffled as to why it would appear suddenly, just on this project, only in a strange handful of circumstances. Any help is appreciated!