StickyKit causing "phantom scrolling" in Chrome
evanart opened this issue · 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
i also have the same issue.
I can also verify that I am seeing this same issue
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.
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.
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.
same here...example here... https://breedingbusiness.com/meaning-of-f1-f1b-f2-f2b-f3-when-discussing-hybrid-dog-breeds/#comment-6637
I got rid of this issue by replacing the script with heskethw's pull request, on this (duplicate) issue:
#219 (comment)
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.
@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!
Is the repo dead? Has somebody forked it?
Does anyone know of a good alternative to Sticky-kit?
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.
@nik-s: Stickyfill is a good one.
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
Same problem here.
@leafo @JohannesFerner I believe this can be closed as per PR #218, though that commit apparently hasn't made it into a release yet.
is that going to be released officially or not?
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 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 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.
Updating jquery to 3.4.1 and use the migrate script 3.0.1 for IE fallbacks. That did the trick !
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.
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';
});
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.
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!