From 3a07a28295d14cc10295adbd5ba931690b2dcef1 Mon Sep 17 00:00:00 2001
From: tuna <ladiesman9x@gmail.com>
Date: Tue, 23 Feb 2021 17:37:27 +0700
Subject: [PATCH] Add variable font size for input display on iOS

---
 .../blank/Magento_CatalogSearch/web/css/source/_module.less  | 5 ++++-
 .../luma/Magento_CatalogSearch/web/css/source/_module.less   | 5 ++++-
 lib/web/css/source/lib/variables/_forms.less                 | 5 +++++
 3 files changed, 13 insertions(+), 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
index 780abd250301a..98b3bd8206e00 100644
--- 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
index 9a85e3a02712c..08e891aae6d47 100644
--- 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
index fff6141c67fd5..805f6792ffc57 100644
--- 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;