Fix: Prevent font-size adjustments on iOS after orientation change#3648
Fix: Prevent font-size adjustments on iOS after orientation change#3648delucis merged 4 commits intowithastro:mainfrom
Conversation
🦋 Changeset detectedLatest commit: 6abbf42 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
✅ Deploy Preview for astro-starlight ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Hello! Thank you for opening your first PR to Starlight! ✨ Here’s what will happen next:
|
Co-authored-by: randomguy-2650 <150704902+randomguy-2650@users.noreply.github.com>
|
Thanks for opening a PR, really appreciated 🙌 I think we'll take a look at it in our weekly Discord Talking & Doc'ing event that we use to publicly handle various aspects of the project. You are of course welcome to join us live if you're interested and available! For such changes that can have a visual impact, and may differ between different users devices or browsers, it's a great way to have many eyes on it and get feedback so I think we will use this opportunity to test the PR on many devices (even Android ones to make sure it does not have any impact there). |
|
Tested deploy preview on S23 Ultra and 14" Android mobile Chrome and this PR doesn't break anything there! Still works on Android for me! |
|
Tested on Android 15 with Firefox 146.0.1, no issues introduced for me! Great job 🙌🏽 |
trueberryless
left a comment
There was a problem hiding this comment.
Thanks for the fix!
I tested on an Android device with Google Chrome and Firefox too and it seems to not have broken anything ✅
delucis
left a comment
There was a problem hiding this comment.
Thanks for the PR and the very thorough documentation and research — appreciate it @maxchang3!
And thanks to everyone who tested this on Talking & Doc’ing! Great to get those extra eyes and testing on a change like this 💖
This PR contains the following updates: | Package | Change | [Age](https://docs.renovatebot.com/merge-confidence/) | [Confidence](https://docs.renovatebot.com/merge-confidence/) | |---|---|---|---| | [@astrojs/starlight](https://starlight.astro.build) ([source](https://github.com/withastro/starlight/tree/HEAD/packages/starlight)) | [`0.37.2` → `0.37.3`](https://renovatebot.com/diffs/npm/@astrojs%2fstarlight/0.37.2/0.37.3) |  |  | --- ### Release Notes <details> <summary>withastro/starlight (@​astrojs/starlight)</summary> ### [`v0.37.3`](https://github.com/withastro/starlight/blob/HEAD/packages/starlight/CHANGELOG.md#0373) [Compare Source](https://github.com/withastro/starlight/compare/@astrojs/starlight@0.37.2...@astrojs/starlight@0.37.3) ##### Patch Changes - [#​3648](withastro/starlight#3648) [`292666c`](withastro/starlight@292666c) Thanks [@​maxchang3](https://github.com/maxchang3)! - Prevents unwanted font size adjustments on iOS after orientation changes. </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0Mi44Mi4zIiwidXBkYXRlZEluVmVyIjoiNDIuODIuMyIsInRhcmdldEJyYW5jaCI6Im1haW4iLCJsYWJlbHMiOltdfQ==--> Co-authored-by: Renovate Bot <renovate@zarantonello.dev> Co-committed-by: Renovate Bot <renovate@zarantonello.dev>
* main: Avoid adding redundant `aria-current="false"` to sidebar entries (withastro#3658) Add link to a new community pluing (withastro#3657) [ci] release (withastro#3654) chore(deps): update actions/setup-node action to v6.2.0 (withastro#3655) Fix: Prevent font-size adjustments on iOS after orientation change (withastro#3648) feat: ✨ add catchintent starlight docs for showcase (withastro#3652)
Description
Closes #3615
This PR adds
text-size-adjustrules on thehtmlelement inreset.cssto prevent platform-specific, inconsistent font scaling on iOS WebKit when the device orientation changes.Problem
On iOS Safari (WebKit), rotating to landscape can trigger text autosizing that causes unwanted font-size adjustments across various UI elements, and the sizes may not revert when rotating back.
Solution
Apply
-webkit-text-size-adjust: 100%andtext-size-adjust: 100%on thehtmlelement to keep sizes consistent across orientation changes without affecting user zoom or accessibility settings.This approach is widely used in mainstream CSS resets, including: normalize.css, tailwindcss/preflight, and modern-normalize.
Testing
Tested on iOS Safari (iOS 26.1, iPhone 15 Pro). Further testing can be done via the deploy preview provided by this PR.
Before and After Video
before.mp4
after.mp4
Background reading:
Footnotes
Safari Web Content Guide ↩
Changeset 145168 in webkit, "Remove desktop version of -webkit-text-size-adjust property." ↩
Can I use
text-size-adjust? ↩text-size-adjust - CSS | MDN ↩