fix: touch drag on mobile with inline touch-action - #16
Merged
Merged
Conversation
…ile drag CSS-only touch-action may not apply correctly on all mobile browsers due to CSS module scoping or specificity conflicts. Adding it as an inline style on the TitleBar root div ensures the browser recognizes the element as non-scrollable during touch drag.
There was a problem hiding this comment.
Pull request overview
This PR aims to make mobile touch dragging of windows more reliable by enforcing touch-action: none on the TitleBar root via an inline style, preventing mobile browsers from canceling pointer events mid-drag.
Changes:
- Added an inline
styleon theTitleBarroot element to applytouchAction: 'none'while attempting to preserve any caller-providedstyle.
Put touchAction: 'none' AFTER spread of rest.style so it cannot be overridden by a caller passing touchAction in their style prop.
Owner
Author
|
@copilot 修正しました。再レビューお願いします。 |
確認しました。 |
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
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
CSS-only
touch-action: noneon title bar may not reliably prevent mobile browser fromstealing touch events due to specificity or module scoping issues.
Fix
Added
touch-action: noneas an inline style on the TitleBar root div,which has the highest CSS specificity and works across all browsers.
Test
Build + tests pass. Needs manual mobile verification.
Root cause
The "moves for a moment then stops" symptom is caused by the browser
firing
pointercancelmid-drag because it doesn't recognize theelement as having
touch-action: nonedue to CSS cascade issues.