Chrome mobile devices input type=text zooming WAY off of the element (NOT trying to prevent zoom overall)

Viewed 1133

I have some JavaScript code which injects a booking widget into customer's websites. Until recently everything has worked fine, but I'm guessing some Chrome update for mobile has caused an issue where the

The injected code is just one line of HTML which references a JavaScript file, like this:

<script src='https://crown.addons.la/leads/new/forms/resize/expander.php' config='3'></script>

The problem is that when I click into the "From Address" the Chrome browser on Android zooms in like 10x and jumps to the right. This does NOT impact the Samsung Browser, Firefox, Brave or any other browser, and I even have examples for SOME people who it is not broken for.

Here is before giving the field focus:

enter image description here

Here is once we give it focus:

enter image description here

The problem I have is that I cannot open developer tools on my phone to fix it, and the problem does not reproduce on Browserstack nor in responsive mode in the desktop version of Chrome. Is there any way to go about debugging this without having to get an entire Android emulator up-and-running?

Examples of customers who have the broken zoom-in effect:

Example of the injected code working:

I'm not sure if there's a better place to ask this. I know it's very specific to myself, but not sure where to even look.

3 Answers

I think that might be a corone version specific issue as I cheched on my device both chrome and firefox there was no such issue but there is a chance that the location access popup mightbe the culprit.

Some web browsers automatically zoom into form fields, if the text inside is below a certain size. this size occasionally changes. If I am not mistaken the size was changed from 16px to 18px. So basically you need to increase the text size.

This is a similar question to: Disable Auto Zoom in Input "Text" tag - Safari on iPhone

Related