sticky-kit icon indicating copy to clipboard operation
sticky-kit copied to clipboard

StickyKit causing "phantom scrolling" in Chrome

Open evanart opened this issue 7 years ago • 25 comments

The new version of Chrome created an issue where the :stick would loop infinitely. This is causing an issue where the page will slowly scroll on it's own in a direction as :stick spams. PR #218 claims to fix the infinite loop issue, but I'm still having the problem after downloading #218 and implementing it.

This seems to happen the most when the user's Chrome browser is set to a zoom level other than 100%, like 90% for example. It also seems to happen when Windows is using DPI scaling as well.

Here is a video of the issue in action. My browser is at 90% zoom here:

https://www.youtube.com/watch?v=hYgh_JVUiBU

Anyone know of a fix? Thanks

evanart avatar Feb 15 '17 21:02 evanart

i also have the same issue.

olex-bel avatar Feb 22 '17 09:02 olex-bel

I can also verify that I am seeing this same issue

ghost avatar Feb 22 '17 09:02 ghost

I also am seeing this in Chrome only. If I move my table and the bare minimum scripts and styles (jquery, sticky-kit, bootstrap for table layout) to a new isolated page, the issue stops, so I'm thinking there is a conflicting script or css style that's causing it but I've not identified it yet. I just see it keeps removing the "is_stuck" (stick_class) in the recalc event to cause it.

ibcoder avatar Feb 22 '17 17:02 ibcoder

For what it's worth, I was able to fix this in my instance by removing a style of "margin-top: 1.5rem" that was being applied to both the element that I call .stick_in_parent() on and also the 'parent': option element ("thisone" and "andthisone"). Perhaps it was causing some position calculation problem that isn't handled.

$(".thisone").stick_in_parent({ 'parent': $('.andthisone), recalc_every: 1 });

Anyway, I thought I'd share in case this might help others find a workaround.

ibcoder avatar Feb 22 '17 17:02 ibcoder

Thanks for the input, @ibcoder. I went through my css and I wasn't using margins on either my classes used with the script. I tried just added margin-top: 0 to them, but that didn't help either.

evanart avatar Feb 22 '17 20:02 evanart

same here...example here... https://breedingbusiness.com/meaning-of-f1-f1b-f2-f2b-f3-when-discussing-hybrid-dog-breeds/#comment-6637

lazharichir avatar Feb 23 '17 08:02 lazharichir

I got rid of this issue by replacing the script with heskethw's pull request, on this (duplicate) issue: https://github.com/leafo/sticky-kit/issues/219#issuecomment-278308706

alexbassy avatar Feb 23 '17 09:02 alexbassy

It does work and stops the phantom scrolling BUT it creates a new problem: on desktop, the given div sticks to the top as expected but close to the end of its parent div, it sticks to the bottom despite having room to still stay stuck to the top for a few centimeters.

I put the phantom scroll version back as my traffic and conversions are on desktop but would appreciate a real fix when possible for the phantom scrolling.

lazharichir avatar Feb 23 '17 09:02 lazharichir

@leafo Do you have any plans to address this issue and the other related issues? Just curious because currently we have StickyKit disabled on our site due to this issue. I've been hoping to hold out for a fix because I really like StickyKit's functionality, but if the project has been abandoned then I'm going to look for an alternative solution. Thanks!

evanart avatar Feb 24 '17 17:02 evanart

Is the repo dead? Has somebody forked it?

lazharichir avatar Feb 25 '17 01:02 lazharichir

Does anyone know of a good alternative to Sticky-kit?

nik-s avatar Feb 27 '17 09:02 nik-s

I am seeing this issue on my sites with sticky kit. Thank you for the video @evanart. Its a hard one to explain but I am seeing the same thing on my site. I also tried the latest version with no luck.

jaiananda avatar Feb 27 '17 18:02 jaiananda

@nik-s: Stickyfill is a good one.

jsit avatar Mar 03 '17 19:03 jsit

I also had the same issue, it appeared to be related to viewing the page at a percentage greater than or less than 100% (by pressing cmd + or cmd -).

Appears to be fixed by applying heskethw's pull request

joshwhatk avatar Mar 20 '17 20:03 joshwhatk

Same problem here.

JohannesFerner avatar Apr 06 '17 09:04 JohannesFerner

@leafo @JohannesFerner I believe this can be closed as per PR #218, though that commit apparently hasn't made it into a release yet.

jsit avatar Apr 06 '17 13:04 jsit

is that going to be released officially or not?

lazharichir avatar Apr 14 '17 05:04 lazharichir

I tried this with jQuery 2.2.4 and 3.3.1. Strangely, with jQuery 2.2.4 the issue is present, but with 3.3.1 it isn't. I haven't investigated this further, but I am curious if others have a similar experience.

jorrit avatar Sep 10 '18 13:09 jorrit

I have a similar issue, it happens when the last element inside a sticky element has margin-bottom. The sticky container height doesn't seem to take into account margins that go beyond the sticky element. Adding a clearfix to the sticky element (or removing the margin-bottom of the last child inside it) was a quick fix for me.

willbroderick avatar Sep 11 '18 14:09 willbroderick

I have a similar issue, it happens when the last element inside a sticky element has margin-bottom. The sticky container height doesn't seem to take into account margins that go beyond the sticky element. Adding a clearfix to the sticky element (or removing the margin-bottom of the last child inside it) was a quick fix for me.

Confirming this worked for me, by removing the margin bottom for the last sticky element that removed phantom scrolling. Padding Bottom worked fine.

bhay350 avatar Jan 18 '19 15:01 bhay350

Updating jquery to 3.4.1 and use the migrate script 3.0.1 for IE fallbacks. That did the trick !

Samvanst avatar Sep 06 '19 08:09 Samvanst

I tried this with jQuery 2.2.4 and 3.3.1. Strangely, with jQuery 2.2.4 the issue is present, but with 3.3.1 it isn't. I haven't investigated this further, but I am curious if others have a similar experience.

I confirm this point. The phantom scroll is gone, but changing the version destroy other stickys presents on the page.

jpcontrerasv avatar Dec 26 '19 13:12 jpcontrerasv

My solution was to disable the default «spacer» feature and implement my own by using the provided event handlers:

$("#containerNav").stick_in_parent({
                parent: 'body',
                spacer: false
            }).on("sticky_kit:stick", function(e) {
                e.target.parentNode.style.height = $(e.target).outerHeight() + 'px';
            }).on("sticky_kit:unstick", function(e) {
                e.target.parentNode.style.height = 'auto';
});

karvas avatar Jan 10 '20 17:01 karvas

Updating jquery to 3.4.1 and use the migrate script 3.0.1 for IE fallbacks. That did the trick !

I confirmed this. Updating jquery resolved the issue.

Nyconing avatar Dec 30 '20 02:12 Nyconing

I have a similar issue, it happens when the last element inside a sticky element has margin-bottom. The sticky container height doesn't seem to take into account margins that go beyond the sticky element. Adding a clearfix to the sticky element (or removing the margin-bottom of the last child inside it) was a quick fix for me.

I am confirming, removing the bottom margin from the last element has fixed the issue. Thanks!

alex-bukach avatar Apr 20 '22 09:04 alex-bukach