Jump to content
Search Community

ScrollTrigger issue when you switch tab

blue-infinity test
Moderator Tag

Recommended Posts

Hello, 

we've just release a website using ScrollTrigger and found out there was an issue when you use pin:true and switch tab,

you can replicate the issue here: https://www.museeatelier-audemarspiguet.com/en/about/tradition-forward-thinking.html

if you scroll down the page to reach the footer, switch tab, come back to the previous one, ScrollTrigger is repositioning the component in the middle of the page

 

I found a hack to fix the issue:

 

let style = ''
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    style = this.$refs.container.getAttribute('style')
  }
  if (document.visibilityState === 'visible') {
    this.$refs.container.setAttribute('style', style)
  }
})

 

if I listen to the tab change an set the style to it's previous state when coming back to the tab, it's solving my problem, but maybe there is a better way to do it

thanks in advance for the help

Screenshot_2020-06-25_at_08_50_57.png

See the Pen tradition-forward-thinking.html by en (@en) on CodePen

Link to comment
Share on other sites

I wonder if it's a caching issue on your end. Are you 100% positive you've got 3.3.4 in there? I checked the link you provided and it seems to indicate that you're still using 3.3.1. If you still need help, please provide a reduced test case that shows the issue and we'd be happy to take a peek. 

  • Like 1
Link to comment
Share on other sites

  • 3 years later...

hi i have also facing this issue on my website when I scroll down my page scroll section works perfectly but when I change the browser tab and return back to my website the scroll middle section is showing on backward on footer over lapping 

image.thumb.png.f08a6a79faec09e62f12443b80bc2ee5.png

Link to comment
Share on other sites

@mvaneijgen sir i have this CDN version
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/ScrollTrigger.min.js"></script>
i used this code

See the Pen eYZpoXa by flowgrow (@flowgrow) on CodePen

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.
×
×
  • Create New...