pin div flickering in chrome #154

Closed
sreejithindia opened this Issue Feb 18, 2014 · 3 comments

Comments

Projects
None yet
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

This comment has been minimized.

Show comment
Hide comment
@jkrot

jkrot Feb 18, 2014

I have noted this as a bug but I have not found a solution besides adding
additional padding at the bottom of the page. Start out with 1000px and
shrink it down from there. Generally it seems to be 1 full pin size from
the bottom will do it for me. This only affects pins near the bottom of
the page.

On Tue, Feb 18, 2014 at 8:30 AM, sreejith notifications@github.com wrote:

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

Reply to this email directly or view it on GitHubhttps://github.com/johnpolacek/superscrollorama/issues/154
.

jkrot commented Feb 18, 2014

I have noted this as a bug but I have not found a solution besides adding
additional padding at the bottom of the page. Start out with 1000px and
shrink it down from there. Generally it seems to be 1 full pin size from
the bottom will do it for me. This only affects pins near the bottom of
the page.

On Tue, Feb 18, 2014 at 8:30 AM, sreejith notifications@github.com wrote:

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

Reply to this email directly or view it on GitHubhttps://github.com/johnpolacek/superscrollorama/issues/154
.

@sreejithindia

This comment has been minimized.

Show comment
Hide comment
@sreejithindia

sreejithindia Feb 19, 2014

hi @jkrot

thanks for the help, no more flickering now.. 👍

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?

hi @jkrot

thanks for the help, no more flickering now.. 👍

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

This comment has been minimized.

Show comment
Hide comment
@janpaepke

janpaepke Feb 19, 2014

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

Collaborator

janpaepke commented Feb 19, 2014

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 Feb 19, 2014

@janpaepke janpaepke added the question label Feb 19, 2014

@janpaepke janpaepke closed this Feb 28, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment