fix: enable vertical scrolling and fix text-size-adjust on iOS Safari#21
Merged
fix: enable vertical scrolling and fix text-size-adjust on iOS Safari#21
Conversation
- Change .shiki overflow from 'auto' to 'overflow-x: auto; overflow-y: visible' to allow parent .code-view-container to handle vertical scrolling - Add -webkit-text-size-adjust: 100% to prevent iOS Safari from auto-adjusting font size in code blocks
✅ Deploy Preview for lynx-go-web ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Add height: 100% to .code-wrap so the descendant .code-view-container can establish a proper scroll container for vertical overflow.
overflow-x: auto with overflow-y: visible computes to overflow: auto per CSS spec, making .shiki a nested scroll container that captures scroll events after React remounts. Use overflow: visible instead and let .code-view-container handle all scrolling.
Place -webkit-text-size-adjust: 100% on the scroll container itself so iOS Safari respects it across example switches and React remounts.
…tate When switching examples, the component remounts and briefly renders a fallback <pre> with overflow:auto before Shiki highlights the code. This nested scroll container captured touch/scroll events on iOS Safari, causing text-size-adjust and scrolling to break after example switching. Fix by using a consistent rp-codeblock wrapper with a .shiki fallback <pre> (which inherits overflow:visible from CSS) instead of a bare <pre style="overflow:auto">.
iOS Safari's text-size-adjust algorithm runs at the document level. Setting it only on child elements (scroll containers, .shiki, etc.) is unreliable — iOS can ignore those declarations and re-apply font scaling for text inside scroll containers. Setting it on html/body ensures it takes effect before first paint and prevents iOS from auto-scaling code text in the editor panel.
Shiki sets --shiki-dark-bg only as an inline style on <pre class="shiki">, so it doesn't cascade up to ancestor elements like .code-wrap or .code-view-container. Those containers fell back to --semi-color-bg-1 (a Semi UI dark color) instead of the github-dark background #24292e, causing a visible color mismatch in dark mode. Fix by defining --shiki-dark-bg and --rp-code-block-bg at the html element level for dark mode, so they cascade to all layout containers. Also corrects the light-mode default to #fff to match github-light.
2 tasks
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
1 participant
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
Fixed two issues with the standalone example's code editor:
.shikioverflow fromautotooverflow-x: auto; overflow-y: visibleto allow the parent.code-view-containerto handle vertical scrolling instead of the pre element capturing scroll events.-webkit-text-size-adjust: 100%to prevent iOS Safari from auto-adjusting font size in code blocks.These changes match the behavior of the rspress code block component and ensure proper scrolling behavior across all platforms.