ITADN

vitepress-twoslash: Mobile scroll chaining issue with persistent type hint popups

#1234Closeddahlia 创建于 2025-12-13
D
dahliacommented
### Validations - [x] Follow our [Code of Conduct](https://github.com/shikijs/shiki/blob/main/CODE_OF_CONDUCT.md) - [x] Read the [Contributing Guide](https://github.com/shikijs/shiki/blob/main/CONTRIBUTING.md). - [x] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate. ### Describe the bug On mobile viewports (or desktop with mobile emulation), pages with Twoslash type hints enabled exhibit a scroll “jittering” behavior. When scrolling down, the page stops scrolling smoothly at certain points and vibrates/stutters instead of continuing to scroll to the bottom. ### Root cause The issue is caused by *scroll chaining* from the `overflow-y: auto` style on `.v-popper__inner` (from floating-vue's default styles). When a user's finger touches the popup area on mobile: 1. The browser first tries to scroll the popup's internal scrollable area 2. When that scroll reaches its boundary, it chains to the page scroll 3. This transition causes the “jittering” effect This is especially problematic because: - Twoslash popups can cover up to ~33% of the mobile viewport - Pages with `// ^?` (Twoslash query) comments have *always-visible* popups (not just on hover) - floating-vue sets `pointer-events: auto` on shown popups, making them intercept touch events ### Suggested fix Add `overscroll-behavior: contain` to prevent scroll chaining: ```css /* In packages/vitepress-twoslash/src/style.css */ .v-popper--theme-twoslash .v-popper__inner { background: var(--twoslash-popup-bg); color: var(--twoslash-popup-color); border-color: var(--twoslash-border-color); overscroll-behavior: contain; /* Prevent mobile scroll chaining */ } ``` ### Reproduction <https://github.com/user-attachments/assets/053d5045-f9a2-4a13-9e6b-b01940688d9d> <https://optique.dev/why> 1. Open the URL in Chrome/Firefox with mobile device emulation 2. Scroll down the page 3. Observe the scroll stuttering/jittering, especially near code blocks with visible type hints ### Contributes - [x] I am willing to submit a PR to fix this issue - [ ] I am willing to submit a PR with failing tests
关闭于 2025-12-14 0 条评论