Fix zoom on search input #27506

[ptylek]

Description (*)

When you click the search box, the browser zooms on the input. This happens on devices using Safari (tablet and mobile) and on both Blank and Luma theme.
This happens because the browser will zoom if the font-size is less than 16px.

The easiest fix is to use font-size of 16px instead of base 14px for that input.

Related Pull Requests

Fixed Issues (if relevant)

1. Viewport resizing on search input focus on iphone #27506: Viewport resizing on search input focus on iphone

Manual testing scenarios (*)

1. Click search icon
2. Click search input
3. With changes from this PR, the browser won't zoom on the input

Repeat for Blank and Luma theme.

Questions or comments

Contribution checklist (*)

• Pull request has a meaningful description of its purpose
• All commits are accompanied by meaningful commit messages
• All new or changed code is covered with unit/integration tests (if applicable)
• All automated tests passed successfully (all builds are green)

[m2-assistant]

Hi @ptylek. Thank you for your contribution
Here is some useful tips how you can test your changes using Magento test environment.
Add the comment under your pull request to deploy test or vanilla Magento instance:

• @magento give me test instance - deploy test instance based on PR changes
• @magento give me 2.4-develop instance - deploy vanilla Magento instance

For more details, please, review the Magento Contributor Guide documentation.

[magento-engcom-team]

Hi @miguelbalparda, thank you for the review.
ENGCOM-7289 has been created to process this Pull Request
✳️ @miguelbalparda, could you please add one of the following labels to the Pull Request?

Label	Description
Auto-Tests: Covered	All changes in Pull Request is covered by auto-tests
Auto-Tests: Not Covered	Changes in Pull Request requires coverage by auto-tests
Auto-Tests: Not Required	Changes in Pull Request does not require coverage by auto-tests

[engcom-Alfa]

@magento give me test instance

[magento-engcom-team]

Hi @engcom-Alfa. Thank you for your request. I'm working on Magento instance for you

[magento-engcom-team]

Hi @engcom-Alfa, here is your new Magento instance.
Admin access: https://pr-27603.instances.magento-community.engineering/admin_45a8
Login: 900ff395 Password: f6edd0458b54
Instance will be terminated in up to 3 hours.

[engcom-Alfa]

Hi @ptylek

Unfortunate, we are not able to reproduce the issue on the fresh 2.4-develop instance

Preconditions:
Luma theme
Safari browser
iPhone 6
OS v. 12.4.5

Actual Result:

Or are we doing something wrong?
@ptylek Could you take a look?

Thanks!

[ptylek]

@magento give me 2.4-develop instance

[magento-engcom-team]

Hi @ptylek. Thank you for your request. I'm working on Magento 2.4-develop instance for you

[magento-engcom-team]

Hi @ptylek, here is your Magento instance.
Admin access: https://i-27603-2-4-develop.instances.magento-community.engineering/admin_5f70
Login: a0dd0067 Password: 0a467347abf2
Instance will be terminated in up to 3 hours.

[ptylek]

@engcom-Alfa I think you used test instance based on PR changes. I just checked it on 2.4 vanilla test instance.

Preconditions:
Luma theme
Safari browser
iPhone 11
OS v. 13.3.1

[engcom-Alfa]

@magento give me 2.4-develop instance

[magento-engcom-team]

Hi @engcom-Alfa. Thank you for your request. I'm working on Magento 2.4-develop instance for you

[magento-engcom-team]

Hi @engcom-Alfa, here is your Magento instance.
Admin access: https://i-27603-2-4-develop.instances.magento-community.engineering/admin_be19
Login: 444138f2 Password: 9a4c7ad3d1d0
Instance will be terminated in up to 3 hours.

[engcom-Alfa]

✔️ QA Passed

Go to Storefront -> 🔍

Before:

After:

The same results and on blank theme

[m2-assistant]

Hi @ptylek, thank you for your contribution!
Please, complete Contribution Survey, it will take less than a minute.
Your feedback will help us to improve contribution process.