framework icon indicating copy to clipboard operation
framework copied to clipboard

Published 20 hours ago • verified publisher icon nuxt

GSAP ScrollTrigger is causing a scroll to top on iOS 16 Safari

Open o1y opened this issue 3 years ago • 0 comments

Environment

  • Operating System: Darwin
  • Node Version: v16.13.0
  • Nuxt Version: 3.0.0-rc.11
  • Nitro Version: 0.5.4
  • Package Manager: [email protected]
  • Builder: vite
  • User Config: -
  • Runtime Modules: -
  • Build Modules: -

Reproduction

https://stackblitz.com/edit/github-gwd8gb?file=app.vue

Describe the bug

On iOS 16 Safari with GSAP ScrollTrigger and scroll-behavior: smooth; in my stylesheet, the page automatically scrolls back to top when the scroll animation has finished. I'm absolutely not sure if this is related to Nuxt, but this issue only occurs on Nuxt rc.11 (I had no issues on rc.8) which is the reason for filling this report:

Workaround Remove scroll-behavior: smooth; or downgrade to an older Nuxt release or use an older iOS version.

Screencast On the left side you'll see an older iOS 14.x release, on the right side the latest iOS 16.0. https://user-images.githubusercontent.com/1102712/191813194-b7d8b2d5-08e8-4c42-bfc8-18bd5440872f.mov

Additional context

I can only reproduce this behaviour on iOS 16.0 Safari.

Logs

No response

o1y avatar Sep 22 '22 17:09 o1y