resolve #7285 Increase the font size for input if its less than 16px …

…in iOS Safari.

src/common-styles/sv-popup.scss

@@ -423,8 +423,8 @@ sv-popup {
 
   .sv-list__input {
     color: $foreground-light;
-    font-size: calcFontSize(1);
-    line-height: calcLineHeight(1.5);
+    font-size: max(16px, calcFontSize(1));
+    line-height: max(24px, calcLineHeight(1.5));
     font-family: $font-family;
     padding: calcSize(0.5) 0 calcSize(0.5) calcSize(2);
   }

src/defaultV2-theme/defaultV2.m600.scss

@@ -8,6 +8,7 @@
   --sd-base-padding: calc(3 * #{$base-unit});
   --sd-base-vertical-padding: calc(2 * #{$base-unit});
   --sd-page-vertical-padding: calc(2 * #{$base-unit});
+  --sjs-mobile-font-editorfont-size: Max(16px, #{$font-default-editorfont-size});
 }
 
 .sd-root-modern {

src/defaultV2-theme/variables.scss

@@ -102,7 +102,8 @@ $font-editorfont-family: var(--sjs-font-editorfont-family, #{$font-family});
 $font-editorfont-weight: var(--sjs-font-editorfont-weight, 400);
 $font-editorfont-color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
 $font-editorfont-placeholdercolor: var(--sjs-font-editorfont-placeholdercolor, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
-$font-editorfont-size: var(--sjs-font-editorfont-size, $font-size);
+$font-default-editorfont-size: var(--sjs-font-editorfont-size, $font-size);
+$font-editorfont-size: var(--sjs-mobile-font-editorfont-size, #{$font-default-editorfont-size});
 $base-unit: var(--sjs-base-unit, var(--base-unit, 8px));
 
 @function multiply($a, $b) {

visualRegressionTests/tests/defaultV2/themes.ts

@@ -326,4 +326,144 @@ frameworks.forEach(framework => {
       await takeElementScreenshot("survey-theme-dropdown-elements.png", popupContainer, t, comparer);
     });
   });
+
+  const jsonWithInputs = {
+    "logoPosition": "right",
+    "pages": [
+      {
+        "name": "page1",
+        "elements": [
+          {
+            "type": "text",
+            "name": "question1",
+            "defaultValue": "test1"
+          },
+          {
+            "type": "comment",
+            "name": "question2",
+            "defaultValue": "test2"
+          },
+          {
+            "type": "multipletext",
+            "name": "question3",
+            "defaultValue": {
+              "text1": "test3"
+            },
+            "items": [
+              {
+                "name": "text1"
+              },
+              {
+                "name": "text2"
+              }
+            ]
+          },
+          {
+            "type": "radiogroup",
+            "name": "question4",
+            "choices": [
+              "Item 1",
+              "Item 2",
+              "Item 3"
+            ]
+          },
+          {
+            "type": "rating",
+            "name": "question5"
+          },
+          {
+            "type": "checkbox",
+            "name": "question6",
+            "choices": [
+              "Item 1",
+              "Item 2",
+              "Item 3"
+            ]
+          },
+          {
+            "type": "dropdown",
+            "name": "question7",
+            "defaultValue": "Item 1",
+            "choices": [
+              "Item 1",
+              "Item 2",
+              "Item 3"
+            ]
+          },
+          {
+            "type": "tagbox",
+            "name": "question8",
+            "defaultValue": [
+              "Item 2",
+              "Item 3"
+            ],
+            "choices": [
+              "Item 1",
+              "Item 2",
+              "Item 3"
+            ]
+          },
+          {
+            "type": "boolean",
+            "name": "question9"
+          },
+          {
+            "type": "ranking",
+            "name": "question10",
+            "choices": [
+              "Item 1",
+              "Item 2",
+              "Item 3"
+            ]
+          }
+        ]
+      }
+    ]
+  };
+
+  test("Desktop: Input font-size less 16px", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(800, 3000);
+      await initSurvey(framework, jsonWithInputs);
+      await ClientFunction(() => {
+        (<any>window).survey.applyTheme({
+          "cssVariables": {
+            "--sjs-font-editorfont-size": "12px",
+            "--sjs-font-size": "20px"
+          }
+        });
+      })();
+
+      const questionDropdownSelect = Selector(".sd-input.sd-dropdown");
+      const popupContainer = Selector(".sv-popup__container").filterVisible();
+      await takeElementScreenshot("survey-theme-desktop-input-size.png", Selector(".sd-root-modern"), t, comparer);
+
+      await t.click(questionDropdownSelect);
+      await takeElementScreenshot("survey-theme-desktop-popup-input-size.png", popupContainer, t, comparer);
+    });
+  });
+
+  test("Mobile mode: input font-size is 16px", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(400, 2000);
+      await ClientFunction(() => { window["Survey"]._setIsTouch(true); })();
+      await initSurvey(framework, jsonWithInputs);
+      await ClientFunction(() => {
+        (<any>window).survey.applyTheme({
+          "cssVariables": {
+            "--sjs-font-editorfont-size": "12px",
+            "--sjs-font-size": "20px"
+          }
+        });
+      })();
+
+      const questionDropdownSelect = Selector(".sd-input.sd-dropdown");
+      const popupContainer = Selector(".sv-popup__container .sv-popup__content").filterVisible();
+      await takeElementScreenshot("survey-theme-mobile-input-size.png", Selector(".sd-root-modern"), t, comparer);
+
+      await t.resizeWindow(400, 1000);
+      await t.click(questionDropdownSelect);
+      await takeElementScreenshot("survey-theme-mobile-popup-input-size.png", popupContainer, t, comparer);
+    });
+  });
 });