Add workaround for font-optical-sizing issue in Safari 16 (#11503)

Shopify · Jan 26, 2024 · fb7d968 · fb7d968
1 parent a6ac992
commit fb7d968
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 0 deletions.
diff --git a/.changeset/few-colts-attend.md 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
@@ -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
@@ -108,6 +108,19 @@ export class AppProvider extends Component<AppProviderProps, State> {
       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();
   }