diff --git a/.changeset/few-colts-attend.md b/.changeset/few-colts-attend.md new file mode 100644 index 00000000000..5e8d82c452f --- /dev/null +++ b/.changeset/few-colts-attend.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': patch +--- + +Added workaround for `font-optical-sizing` issue in Safari 16 diff --git a/polaris-react/src/components/AppProvider/AppProvider.scss b/polaris-react/src/components/AppProvider/AppProvider.scss index 8b22c38842c..4c4bf322e02 100644 --- a/polaris-react/src/components/AppProvider/AppProvider.scss +++ b/polaris-react/src/components/AppProvider/AppProvider.scss @@ -92,3 +92,9 @@ button::-moz-focus-inner, [type='submit']::-moz-focus-inner { border-style: none; } + +// stylelint-disable-next-line selector-no-qualifying-type -- Workaround for `font-optical-sizing` issue in Safari 16 (Adapted from https://clagnut.com/blog/2423) +html[class~='Polaris-Safari-16-Font-Optical-Sizing-Patch'] { + // Inter's "opsz" axis ranges from 14 to 32. This patch optimizes for smaller and less legible text by setting "opsz" 14 for all font sizes. + font-variation-settings: 'opsz' 14; +} diff --git a/polaris-react/src/components/AppProvider/AppProvider.tsx b/polaris-react/src/components/AppProvider/AppProvider.tsx index 54e5fcaf283..86298bc692e 100644 --- a/polaris-react/src/components/AppProvider/AppProvider.tsx +++ b/polaris-react/src/components/AppProvider/AppProvider.tsx @@ -108,6 +108,19 @@ export class AppProvider extends Component { this.stickyManager.setContainer(document); this.setBodyStyles(); this.setRootAttributes(); + + const isSafari16 = + navigator.userAgent.includes('Safari') && + !navigator.userAgent.includes('Chrome') && + (navigator.userAgent.includes('Version/16.1') || + navigator.userAgent.includes('Version/16.2') || + navigator.userAgent.includes('Version/16.3')); + + if (isSafari16) { + document.documentElement.classList.add( + 'Polaris-Safari-16-Font-Optical-Sizing-Patch', + ); + } } measureScrollbars(); }