Skip to content

Loading…

pin div flickering in chrome #154

Closed
sreejithindia opened this Issue · 3 comments

3 participants

@sreejithindia

hi,
i'm using superscrollorama in my current project...

my client need 7 pinned divisions, so i made it like that...

the problem is, when i open the page in chrome and move to the 7th pinned division, which is the last one, i get a flickering effect.

How can I fix it?

this is the link where i set the page
http://focaloid.fesstoon.com/scroll

@jkrot
@sreejithindia

hi @jkrot

thanks for the help, no more flickering now.. :+1:

this is the code i wrote

if (/Chrome\/\s/.test(navigator.userAgent)){
controller.addTween('footer', TweenMax.from($('footer'), 1, {css:{'padding-bottom':'1000px'}}));
}

but due to that padding-bottom, now the footer is expanding and shrinking in chrome..
is there any way i can fix it?

@janpaepke
Collaborator

Hi!
I don't think james meant for you to actually shrink the padding programmatically, like you did.
Just set a fixed padding bottom and try to figure out the correct value so the flickering doesn't occur anymore.
In my experience the flickering is always for this reason: During Pin the element is fixed and doesn't account to the document's height or the position of the following elements.
Once unpinned it will though. So if there's a footer below it will be pushed further down, resulting in the page getting longer. This in turn makes your scroll position jump up a bit (because suddenly you are not at the end of the document anymore) and usually it jumps right back in to where the element is supposed to be pinned. Voilá, endless loop.
The solution is to make sure the Document has the correct length and it doesn't change.
Set pushFollowers to false, define the size of the space before the footer (the duration of the pin) manually and make sure your pinned element or its container are positioned absolutely.

regards,
Jan

@janpaepke janpaepke self-assigned this
@janpaepke janpaepke added the question label
@janpaepke janpaepke closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.