Repository navigation
Modal: register the drag offset as a non-inherited property - #669
Merged
Merged
Conversation
--rs-modal-drag is written to the modal root on every frame of the swipe-to-close gesture. As an unregistered custom property it inherits, so each update forced Chromium to recalculate style for every element of the modal content: measured 5.9ms per frame for a sheet with 6000 nodes. Registering it with @Property { inherits: false } scopes the recalculation to the root itself (0.1ms per frame on the same sheet). Browsers without @Property support keep the previous behavior. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01EAi9QQVSFuJ7Gkf8SUTYJq
size-limit report 📦
|
blvdmitry
marked this pull request as ready for review
September 12, 2026 16:33
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.
Summary
Modaldrives its swipe-to-close gesture by writing--rs-modal-dragto the modal root on everytouchmoveframe (throttled byrequestAnimationFrame), and the root'stransformreads it back. The property itself is the right tool (the transform stays on the compositor), but as an unregistered custom property it inherits, so each write invalidates the computed style of every element inside the modal. On a content-heavy sheet that is the dominant per-frame cost of the gesture, and it lands on the main thread, which is exactly what gets throttled on phones in low-power mode.This PR registers it with
@property { inherits: false }so the update only recalculates the root's own style. No JS or markup changes; nothing else reads the variable.Measured in headless Chromium on the
position: bottomstory with 2000 extra rows appended (6008 nodes inside the dialog), timingstyle.setProperty('--rs-modal-drag')+ forced style recalc:main(inherited custom property)@property,inherits: false)Browsers without
@propertysupport ignore the rule and keep the previous behavior, same as the existing registrations inScrollAreaandTable.Related Issue
N/A
Screenshots / Recordings
Simulated a touch drag on a bottom modal in Chromium: the sheet follows the finger (
translate(0, 88px)at 88px of drag) and closes on release, same as before.Notes for Reviewers
🤖 Generated with Claude Code
https://claude.ai/code/session_01EAi9QQVSFuJ7Gkf8SUTYJq
Generated by Claude Code