fix(reset.css): avoid iOS Safari to unexpectedly zoom some font sizes (…

…#904) * fix(reset.css): avoid iOS Safari to unexpectedly zoom some font sizes * apply textSizeAdjust to Text components too * fix css comment
Telefonica · Oct 4, 2023 · 92f7258 · 92f7258 · github-actions · Oct 4, 2023
1 parent 3ab7dd4
commit 92f7258
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/css/reset.css b/css/reset.css
@@ -73,6 +73,10 @@ body {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-family: -apple-system, 'Roboto', 'Helvetica', 'Arial', sans-serif;
+
+    /* https://stackoverflow.com/questions/20924039/wrong-font-size-when-using-float-right-in-css-on-mobile-safari/22417120#22417120 */
+    text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
 }
 *,
 *:before,

diff --git a/src/text.css.ts b/src/text.css.ts
@@ -40,6 +40,8 @@ export const text = style({
     margin: 0, // Needed to reset the default browser margin that adds to p, h1, h2... elements.
     fontSize: desktopSize,
     lineHeight: desktopLineHeight,
+    textSizeAdjust: '100%',
+    WebkitTextSizeAdjust: '100%',
 
     '@media': {
         [mq.tabletOrSmaller]: {