Add variable font size for input display on iOS

magento · Feb 23, 2021 · 3a07a28 · 3a07a28
1 parent 2e2af0a
commit 3a07a28
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/app/design/frontend/Magento/blank/Magento_CatalogSearch/web/css/source/_module.less b/app/design/frontend/Magento/blank/Magento_CatalogSearch/web/css/source/_module.less
@@ -65,7 +65,6 @@
         }
 
         input {
-            font-size: 16px;
             left: -300%;
             margin: 15px 0;
             position: absolute;
@@ -188,6 +187,10 @@
         .block-content {
             margin-bottom: 0;
         }
+
+        input {
+            font-size: @form-element-input-mobile__font-size;
+        }
     }
 }
 

diff --git a/app/design/frontend/Magento/luma/Magento_CatalogSearch/web/css/source/_module.less b/app/design/frontend/Magento/luma/Magento_CatalogSearch/web/css/source/_module.less
@@ -80,7 +80,6 @@
         }
 
         input {
-            font-size: 16px;
             left: -300%;
             margin: 15px 0;
             position: absolute;
@@ -215,6 +214,10 @@
 .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
     .block-search {
         margin-top: @indent__s;
+
+        input {
+            font-size: @form-element-input-mobile__font-size;
+        }
     }
 }
 

diff --git a/lib/web/css/source/lib/variables/_forms.less b/lib/web/css/source/lib/variables/_forms.less
@@ -23,6 +23,11 @@
 @form-element-input__vertical-align: baseline;
 @form-element-input__background-clip: padding-box; // [border-box|content-box|padding-box]
 @form-element-input__font-size: @font-size__base;
+
+//  On iOS the search input has to be at least 16px large,
+//  otherwise it will needlessly trigger page zoom once the input is focused.
+@form-element-input-mobile__font-size: 1.6rem;
+
 @form-element-input__color: false;
 @form-element-input__font-family: @font-family__base;
 @form-element-input__font-weight: false;