Using Locomotive scroll causes some flickering when scrolling upwards. The elements in the upper sections appear in the viewport with a small but noticeable lag (maybe 0.1 sec). I saw a lot of demos, but almost all of these websites have the same issue. For example, the official demo: look at the section "04. Fixed elements" - the image is flickering when scrolling up to it.
Is it unavoidable when using Locomotion smooth scrolling?
P.S. Chrome 97.0 on Windows
UPDATE 1 That problem appears only on Chrome based browsers since 94 version due to implementation of their virtual-scroller.
Have found a temporal solution:
.has-scroll-smooth
{position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;}
But this breaks the layout if you use fixed position for some elements on the page.
I was facing the same issue till now, but I have started playing with matrix3D coordinates and finally, I have fixed it.
Just find your matrix3D coordinates from locomotive-sroll.min.js and replace them with the below value.
Thank me later.
key: "transform",
value: function(t, e, i, s) {
var n;
if (s) {
var o = q(t),
r = F(o.x, e, s),
l = F(o.y, i, s);
n = "matrix3d(1,0,1,0,0,1,0,0,0,0,1,0,".concat(r, ",").concat(l, ",0,1)");
} else n = "matrix3d(1,0,1,0,0,1,0,0,0,0,1,0,".concat(e, ",").concat(i, ",0,1)");
console.log(n);
t.style.webkitTransform = n, t.style.msTransform = n, t.style.transform = n
} save yourself the hassle and use the native Method
and make your own function like:
// scroll to element smoothly via native built in function on said element
// just change x13 to the id of your element or use the scrollIntoView Function on an element which you can get from various document.querySelector or others.
document.getElementById('x13').scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});