fix(Typography): ensure Safari on iOS gets a root font-size of 15px i…

…nstead of 17px
dnbexperience · Dec 13, 2024 · 2a16ffb · 2a16ffb
1 parent ae4648a
commit 2a16ffb
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 deletions.
diff --git a/packages/dnb-eufemia/src/style/core/scopes.scss b/packages/dnb-eufemia/src/style/core/scopes.scss
@@ -69,14 +69,17 @@
 
 @mixin htmlDefault() {
   html {
+    font-size: 100%;
+
     &:not([data-visual-test]) {
       scroll-behavior: smooth;
     }
-    font-size: 100%;
 
-    // IS_SAFARI_MOBILE
-    @supports (-webkit-touch-callout: none) {
-      @supports (font: -apple-system-body) {
+    // In order to let Safari know the font-size set on the system level
+    @supports (font: -apple-system-body) {
+      // Safari on iOS
+      @supports (-webkit-touch-callout: none) {
+        // Sets the base font-size to 17px
         font: -apple-system-body; /* stylelint-disable-line */
       }
     }

diff --git a/packages/dnb-eufemia/src/style/themes/theme-ui/ui-theme-basis.scss b/packages/dnb-eufemia/src/style/themes/theme-ui/ui-theme-basis.scss
@@ -7,3 +7,15 @@
 @import './fonts.scss';
 @import './ui-theme-elements.scss';
 @import './globals.scss';
+
+html {
+  // In order to let Safari know the font-size set on the system level
+  // Because the default font-size is 18px, we lower the basis font-size to 15px instead of 17px
+  @supports (font: -apple-system-subheadline) {
+    // Safari on iOS
+    @supports (-webkit-touch-callout: none) {
+      // Sets the base font-size to 15px
+      font: -apple-system-subheadline; /* stylelint-disable-line */
+    }
+  }
+}