perf: Add passive event listeners to scroll and touch events#48385
Merged
rafaeelaudibert merged 1 commit intomasterfrom Feb 23, 2026
Merged
perf: Add passive event listeners to scroll and touch events#48385rafaeelaudibert merged 1 commit intomasterfrom
rafaeelaudibert merged 1 commit intomasterfrom
Conversation
rafaeelaudibert
requested review from
a team,
MattBro and
fercgomes
and removed request for
a team
This was referenced Feb 18, 2026
This was referenced Feb 18, 2026
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| document.addEventListener('mousemove', handleMouseMove) | ||
| document.addEventListener('mouseup', handleEnd) | ||
| document.addEventListener('touchmove', handleTouchMove) | ||
| document.addEventListener('touchmove', handleTouchMove, { passive: true }) |
Contributor
There was a problem hiding this comment.
Verify that the touch-none CSS class on line 170 correctly prevents scrolling during resize. Passive touch listeners can't call preventDefault(), so we rely on CSS touch-action: none to prevent scrolling during drag operations on touch devices.
Prompt To Fix With AI
This is a comment left during a code review.
Path: frontend/src/lib/components/ResizeElement/ResizeElement.tsx
Line: 142
Comment:
Verify that the `touch-none` CSS class on line 170 correctly prevents scrolling during resize. Passive touch listeners can't call `preventDefault()`, so we rely on CSS `touch-action: none` to prevent scrolling during drag operations on touch devices.
How can I resolve this? If you propose a fix, please make it concise.
Contributor
|
Size Change: +27 B (0%) Total Size: 100 MB ℹ️ View Unchanged
|
rafaeelaudibert
force-pushed
the
rafa/fix-components-inside-components
branch
from
959ab34 to
39e4b65
Compare
rafaeelaudibert
force-pushed
the
rafa/fix-passive-scroll-listeners
branch
from
0fc161a to
1446270
Compare
rafaeelaudibert
force-pushed
the
rafa/fix-components-inside-components
branch
from
39e4b65 to
a6cd90b
Compare
rafaeelaudibert
force-pushed
the
rafa/fix-passive-scroll-listeners
branch
from
1446270 to
f799d39
Compare
Scroll and touchmove event listeners without { passive: true } block
the browser's compositor thread, causing scroll jank. Add the passive
option where handlers don't call preventDefault().
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
rafaeelaudibert
changed the base branch from
rafa/fix-components-inside-components
to
graphite-base/48385
rafaeelaudibert
force-pushed
the
graphite-base/48385
branch
from
a6cd90b to
92070c8
Compare
rafaeelaudibert
force-pushed
the
rafa/fix-passive-scroll-listeners
branch
from
f799d39 to
6cb63e9
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
The application is experiencing performance issues with scroll and touch events. These events are not marked as passive, which can cause unnecessary browser repainting and lead to jank during scrolling, especially on mobile devices.
Changes
Added the
{ passive: true }option to event listeners for:touchmovein ResizeElement componentscrollin VisibilitySensor component (also fixed a memory leak by properly defining the handler function)scrollin useScrollObserver hookscrollin ThreadAutoScroller componentThese changes improve scrolling performance by telling the browser that the event handlers won't call
preventDefault(), allowing the browser to optimize scrolling operations.How did you test this code?
Tested scrolling performance on both desktop and mobile devices, particularly focusing on areas with the ResizeElement, VisibilitySensor, and thread scrolling functionality. Verified that scrolling remains smooth without any functional regressions.
Publish to changelog?
No