darkroomengineering / lenis

How smooth scroll should be
https://lenis.darkroom.engineering
MIT License
7.37k stars 317 forks source link

Lenis stop scroll smooth hovering images in safari #206

Closed studio-am closed 11 months ago

studio-am commented 11 months ago

Hello, When I scroll in Safari (only Safari) where I am with mouse hovering some images Lenis stop scrool smoothly ( html tag doesn't take lenis-scrolling tag), but if I scroll on the other part of the site near images it works perfectly. If I open with dev-tools (refreshing it) it works fine, but if I close dev-tools and refresh (so in full screen) it still have the problem (so it's not a cache issue), also if I resize.

That's the implementation:

const lenis = new Lenis({
  duration: 1.2,
  smoothWheel:true,
  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
})

function raf(time) {
  lenis.raf(time)
  requestAnimationFrame(raf)
}

requestAnimationFrame(raf)

lenis.on('scroll', ScrollTrigger.update)

gsap.ticker.add((time)=>{
  lenis.raf(time * 1000)
})

gsap.ticker.lagSmoothing(0)

And that's the link una barca per tutti

clementroche commented 11 months ago

which safari version do you use ?

studio-am commented 11 months ago

Safari 16.5 (18615.2.9.11.4)

clementroche commented 11 months ago

You're calling two time lenis.raf, one coming from requestAnimationFrame(raf) and the other from gsap.ticker, remove the requestanimationframe