Describe the bug:
On my website, I'm using the Locomotive Scroll library for custom scrolling behavior. I've noticed a significant degradation in scrolling quality on high-resolution displays, leading to lagging and a lack of smooth scrolling. For instance, scrolling works smoothly on a display with a resolution of 1470x798, but on a 3440x1440 screen, there's pronounced lagging.
To Reproduce:
I can't share the link to the site, but the locomotive github page was a template for building a locomotive scroll on my site. It is built exactly the same as here and I would also expect the same behavior as on the locomotive website. The locomotive github page has no performance drop when I run it on a larger screen.
Expected behavior:
I would expect that regardless of the screen size or resolution, scrolling on the site would remain equally smooth. Is there a way to optimize Locomotive Scroll's performance to avoid these efficiency issues on larger screens?
Screenshots:
Below are two screenshots of the page's performance while scrolling. The one with a lot of skipped frames is scrolling through the home page of my website on a UHD monitor. The one in which no frame was skipped while scrolling is scrolling the home page of my website on the MacBook Air monitor.
Desktop:
OS: 13.1
Browser Chrome
Version 122.0.6261.112
Mobile:
The problem does not occur on the phone.
Has anyone encountered a similar issue and found an effective solution or workaround? Are there any known practices or optimizations that could help improve scrolling performance on sites using Locomotive Scroll, especially on high-resolution screens?
Hello 👋
Describe the bug: On my website, I'm using the Locomotive Scroll library for custom scrolling behavior. I've noticed a significant degradation in scrolling quality on high-resolution displays, leading to lagging and a lack of smooth scrolling. For instance, scrolling works smoothly on a display with a resolution of 1470x798, but on a 3440x1440 screen, there's pronounced lagging.
To Reproduce: I can't share the link to the site, but the locomotive github page was a template for building a locomotive scroll on my site. It is built exactly the same as here and I would also expect the same behavior as on the locomotive website. The locomotive github page has no performance drop when I run it on a larger screen.
https://locomotivemtl.github.io/locomotive-scroll/
Expected behavior: I would expect that regardless of the screen size or resolution, scrolling on the site would remain equally smooth. Is there a way to optimize Locomotive Scroll's performance to avoid these efficiency issues on larger screens?
Screenshots: Below are two screenshots of the page's performance while scrolling. The one with a lot of skipped frames is scrolling through the home page of my website on a UHD monitor. The one in which no frame was skipped while scrolling is scrolling the home page of my website on the MacBook Air monitor.
Desktop:
Mobile: The problem does not occur on the phone.
Has anyone encountered a similar issue and found an effective solution or workaround? Are there any known practices or optimizations that could help improve scrolling performance on sites using Locomotive Scroll, especially on high-resolution screens?
Thank you 👊