From 190d926284d6231d7ae33a2565fefd685172efea Mon Sep 17 00:00:00 2001 From: Aaron Casanova Date: Wed, 24 Jan 2024 15:07:21 -0800 Subject: [PATCH 1/3] Add workaround for font-optical-sizing issue in Safari 16 --- .../src/components/AppProvider/AppProvider.scss | 5 +++++ .../src/components/AppProvider/AppProvider.tsx | 13 +++++++++++++ 2 files changed, 18 insertions(+) diff --git a/polaris-react/src/components/AppProvider/AppProvider.scss b/polaris-react/src/components/AppProvider/AppProvider.scss index 8b22c38842c..149b48901fd 100644 --- a/polaris-react/src/components/AppProvider/AppProvider.scss +++ b/polaris-react/src/components/AppProvider/AppProvider.scss @@ -92,3 +92,8 @@ 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 (https://clagnut.com/blog/2423) +html[class~='Polaris-Safari-16-Remove-Font-Optical-Sizing'] { + font-variation-settings: 'opsz' 0; +} diff --git a/polaris-react/src/components/AppProvider/AppProvider.tsx b/polaris-react/src/components/AppProvider/AppProvider.tsx index 54e5fcaf283..72163e6483b 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-Remove-Font-Optical-Sizing', + ); + } } measureScrollbars(); } From c702e9e1511093af43604b891608714689539d7f Mon Sep 17 00:00:00 2001 From: Aaron Casanova Date: Wed, 24 Jan 2024 15:09:23 -0800 Subject: [PATCH 2/3] Add changeset entry --- .changeset/few-colts-attend.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/few-colts-attend.md 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 From e87552bd9bc65d3c29b21c7b6b6549b72cfb00a7 Mon Sep 17 00:00:00 2001 From: Aaron Casanova Date: Fri, 26 Jan 2024 11:01:50 -0800 Subject: [PATCH 3/3] Update class name and documentation --- polaris-react/src/components/AppProvider/AppProvider.scss | 7 ++++--- polaris-react/src/components/AppProvider/AppProvider.tsx | 2 +- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/polaris-react/src/components/AppProvider/AppProvider.scss b/polaris-react/src/components/AppProvider/AppProvider.scss index 149b48901fd..4c4bf322e02 100644 --- a/polaris-react/src/components/AppProvider/AppProvider.scss +++ b/polaris-react/src/components/AppProvider/AppProvider.scss @@ -93,7 +93,8 @@ button::-moz-focus-inner, border-style: none; } -// stylelint-disable-next-line selector-no-qualifying-type -- Workaround for `font-optical-sizing` issue in Safari 16 (https://clagnut.com/blog/2423) -html[class~='Polaris-Safari-16-Remove-Font-Optical-Sizing'] { - font-variation-settings: 'opsz' 0; +// 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 72163e6483b..86298bc692e 100644 --- a/polaris-react/src/components/AppProvider/AppProvider.tsx +++ b/polaris-react/src/components/AppProvider/AppProvider.tsx @@ -118,7 +118,7 @@ export class AppProvider extends Component { if (isSafari16) { document.documentElement.classList.add( - 'Polaris-Safari-16-Remove-Font-Optical-Sizing', + 'Polaris-Safari-16-Font-Optical-Sizing-Patch', ); } }