4

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.

Bing
  • 3,071
  • 6
  • 42
  • 81
  • The two websites you provided seem to be working on Android Chrome as of this comment. What was the issue and the fix? – Praveen Lobo Mar 18 '22 at 02:44
  • @PraveenLobo they are still broken on my phone Samsung XCover Pro running Chrome 99.0.4844.73 on Android 11. – Bing Mar 20 '22 at 18:59
  • 1
    On the limousine site, I don't see From address but when I touch the Pick up Location, page doesn't zoom as you mention. on the 247ride site, the From address field also works fine and no zoom. On Pixel 6 - Chrome 99.0.4844.73. Having said that I had the same issue in one of my projects that started showing up around the beginning of Feb 2022 and I resolved it by adding `user-scalable=no` to meta tag something like: ``. I had to make additional CSS changes due adding this to the meta tag. – Praveen Lobo Mar 21 '22 at 03:16
  • I copied the source code from my first linked example to my own site and hosted it here where it is NOT having the problem: acmedemo.addons.la/crown-test So it doesn't appear to be an issue with the raw HTML itself... – Bing Mar 22 '22 at 17:08
  • If it helps, in my case I was able to reproduce the issue on my project page when I ran into it by having just an input text box and no css or JS. Updating the viewport with user-scalable=no is the only solution I found that worked. – Praveen Lobo Mar 24 '22 at 02:12

3 Answers3

1

This was a bug with Chromium itself, which was fixed in v103.

Bug report can be found here: https://bugs.chromium.org/p/chromium/issues/detail?id=1296183

Bing
  • 3,071
  • 6
  • 42
  • 81
0

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.

Akash Sinha
  • 130
  • 2
  • 4
0

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

anthony0030
  • 37
  • 5
  • I copied the source code to my own site and hosted it here where it is NOT having the problem: https://acmedemo.addons.la/crown-test/ So it doesn't appear to be a font size issue... – Bing Mar 20 '22 at 19:01