dashersw/liquid-glass-js
1
0
Fork 0
Code Issues 1 Pull requests 1 Projects Releases Packages Wiki Activity Actions

UI performance issue during scroll #2

New issue
Open
opened 2025-11-05 22:37:56 -05:00 by ricardious · 2 comments
ricardious commented 2025-11-05 22:37:56 -05:00 (Migrated from github.com)
Copy link

Hi @dashersw! First off, this library’s effect looks fantastic—one of the best refraction effects I’ve seen on the web. I did notice noticeable scroll lag when placing the glass component inside a fixed navbar. From what I can tell, it stems from html2canvas needing to snapshot the DOM during scrolling. Hope this helps—amazing project!

Hi [@dashersw](https://github.com/dashersw)! First off, this library’s effect looks fantastic—one of the best refraction effects I’ve seen on the web. I did notice noticeable scroll lag when placing the glass component inside a fixed navbar. From what I can tell, it stems from html2canvas needing to snapshot the DOM during scrolling. Hope this helps—amazing project!
fajriyan commented 2025-11-09 22:55:30 -05:00 (Migrated from github.com)
Copy link

I feel the same way, there is scroll lag

I feel the same way, there is scroll lag
mpbagot commented 2025-11-19 06:41:24 -05:00 (Migrated from github.com)
Copy link

Are your glass components nested? From what I've seen, the html2canvas snapshot should only refresh when the window changes size, but a child component will take constant (~30fps) snapshots of its parent's canvas.

If not, are you on a mobile device? Scrolling on some mobile browsers causes the top browser address bar to disappear which might force a html2canvas refresh.

Are your glass components nested? From what I've seen, the html2canvas snapshot should only refresh when the window changes size, but a child component will take constant (~30fps) snapshots of its parent's canvas. If not, are you on a mobile device? Scrolling on some mobile browsers causes the top browser address bar to disappear which might force a html2canvas refresh.
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
No results found.
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
dashersw/liquid-glass-js#2
No description provided.