fix(vitepress-twoslash): scroll blocking on mobile viewports #1235
Conversation
Add content-visibility: auto to popper elements to prevent them from affecting browser wheel scroll calculations. This fixes an issue where scrolling would stop prematurely on pages with Twoslash type hints. Closes shikijs#1234
✅ Deploy Preview for shiki-next ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for shiki-matsu ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #1235 +/- ##
=======================================
Coverage 95.21% 95.21%
=======================================
Files 92 92
Lines 7936 7936
Branches 1694 1694
=======================================
Hits 7556 7556
Misses 374 374
Partials 6 6 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
The CI failure on The failing test ( |
antfu
changed the title
2 participants
Description
Fix scroll blocking issue on mobile viewports when pages contain Twoslash type hint popups (
// ^?queries).The original issue hypothesized this was a “scroll chaining” problem from
overflow-y: auto, but investigation revealed a different root cause: multiple popper elements withposition: absoluteand transforms were affecting the browser's wheel scroll calculations, causing scroll to stop prematurely (at ~96% of max scroll instead of 100%).The fix adds
content-visibility: autoto popper elements, which tells the browser to optimize rendering of off-screen content and prevents them from interfering with scroll calculations.Linked issues
Fixes #1234.
Additional context
Testing performed
Why
overscroll-behavior: containdidn't workThe issue wasn't scroll chaining from inner scrollable elements—it was the popper elements affecting the browser's scroll boundary calculation itself.