Using with smooth scrolling libraries

[nurpais]

Hello! it's an amazing library.

I have some issues when working with safari. If I hover the cursor over an image, text appears or when I hover over links or buttons, the cursor decreases. The problem is that if I scroll down, the cursor remains in the same state. Everything works fine in google chrome. Maybe I missed something.

[nurpais]

https://user-images.githubusercontent.com/25268319/185496197-1ec8e9eb-25ce-4049-89dd-26a48dda4364.mov

[Drafteed]

Thanks! Is the smooth scrolling library using on your page?

[nurpais]

Yes, I am using the locomotive-scroll library.

[Drafteed]

Using smooth scrolling libraries leads to this result, since the browser does not recalculate (on custom scrolling) mouseenter/mouseleave events, css hovers, etc.

The only suggestion I can make is to try and force a reflow/redraw at the end of the scroll to force the browser recalculate the "hover events".

Example (need tune):

import LocomotiveScroll from 'locomotive-scroll';
import debounce from 'lodash-es/debounce';

const scroll = new LocomotiveScroll({
    el: document.querySelector('[data-scroll-container]'),
    smooth: true
});

const reflow = () => {
    const el = document.querySelector('.c-scrollbar'); // some visible element on page
    el.style.display = 'none';
    for(let i = 0; i < 3; i++) el.offsetHeight;
    el.style.display = 'block';
};

const reflowDebounced = debounce(reflow, 50);

scroll.on('scroll', () => {
    reflowDebounced();
});

[nurpais]

Thank you @Drafteed, I will try and let you know.

[samholguin]

This solution isn't working for me, unfortunately.

I'm using the Lenis library [https://github.com/studio-freight/lenis].

When the cursor hides after morphing to text mode.