Add workaround for font-optical-sizing issue in Safari 16
#11503
Conversation
|
/snapit |
|
🫰✨ Thanks @aaronccasanova! Your snapshots have been published to npm. Test the snapshots by updating your yarn add @shopify/[email protected]yarn add @shopify/[email protected]yarn add @shopify/[email protected]yarn add @shopify/[email protected]yarn add @shopify/[email protected] |
aaronccasanova
requested review from
kyledurand,
sam-b-rose,
chloerice,
alex-page and
sophschneider
| !navigator.userAgent.includes('Chrome') && | ||
| (navigator.userAgent.includes('Version/16.1') || | ||
| navigator.userAgent.includes('Version/16.2') || | ||
| navigator.userAgent.includes('Version/16.3')); |
There was a problem hiding this comment.
Assume this is fixed in Safari 16.4 and above? If so, this is fine with me for now.
There was a problem hiding this comment.
Yes, to my understanding 👍
There was a problem hiding this comment.
Reference links:
Update: as of Safari 16.4, this bug has been fixed.
also means we are going
fast enough that we can enable optical sizing on every font - because doing so is just an
attribute in a dictionary, rather than creating a whole new CTFont. That is the fix for this
bug: enabling optical sizing on all fonts.
| const isSafari16 = | ||
| navigator.userAgent.includes('Safari') && | ||
| !navigator.userAgent.includes('Chrome') && | ||
| (navigator.userAgent.includes('Version/16.1') || |
There was a problem hiding this comment.
The issue started in v16.1
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @shopify/[email protected] ### Patch Changes - [#11499](#11499) [`a6ac9928a`](a6ac992) Thanks [@laurkim](https://github.com/laurkim)! - Fixed layout and focus styling for `Button` inside `ButtonGroup` with `fullWidth` - [#11503](#11503) [`fb7d96821`](fb7d968) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Added workaround for `font-optical-sizing` issue in Safari 16 ## [email protected] ### Patch Changes - Updated dependencies \[[`a6ac9928a`](a6ac992), [`fb7d96821`](fb7d968)]: - @shopify/[email protected] Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
|
Can we document an issue somewhere to remove this temporary fix? My gut feeling is we could probably remove this fix when 16.16 releases and there are two stable versions with the fix. |
|
@alex-page Added an issue for it: https://github.com/Shopify/polaris-internal/issues/1394 |
Fixes https://github.com/Shopify/polaris-internal/issues/1395
This PR adds a workaround for the
font-optical-sizingissue in Safari 16It's important to note this solution is NOT the best merchant experience we can provide, but resolves the immediate issue of thin
font-weightsrendering across the Admin. I suggest we follow up this PR with an exploration to matchopszvalues to eachTextvariantfont-sizeas described by the Google Fonts Glossary:Screenshot of the
Polaris-Safari-16-Remove-Font-Optical-Sizingclass applying in the iOS 16.2 simulator: