Rook2022-android-zoom | Stripe Developers | Page 1

sleek junco Jun 6, 2022, 1:59 PM

#

Hi 👋 I don't recall the specifics, but yes, we've seen this crop up quite a bit over the past couple months.

There is now something in the Android environment, where if a field is rendered under a certain number of pixels, the OS will zoom in on it. It's particularly tricky since it's based on rendered size which fluctuates with screen size of the device.

brazen zephyr Jun 6, 2022, 2:01 PM

#

Is there a recommendation from Stripe on how to avoid this? All of the other fields on the page outside of stripes form don't do this.

sleek junco Jun 6, 2022, 2:08 PM

#

No, not that I'm aware of.

brazen zephyr Jun 6, 2022, 2:09 PM

#

Ok. So I am hearing that this is an Android specific issue?

#

I will keep investigating. Thanks

sleek junco Jun 6, 2022, 2:11 PM

#

That is my understanding, though I think from their point of view it's expected behavior rather than an issue.

brazen zephyr Jun 6, 2022, 2:14 PM

#

I'm not sure if you've seen it but it's impossible to even enter anything on the input it's so bad. It zooms in the the bottom right of the input so far that you can't even see the input to type.

#

and the "Scan new card" label pops up which does hide anything else you can possibly see.

#

And again, this is only on Stripe elements. The inputs above it do not act this way

#

Here's what it looks like when you click in one of our inputs:

#

#

and this is what it looks like when clicking in the stripe credit card input:

snow cairn Jun 6, 2022, 2:30 PM

#

More than being Android-specific, this is often specific to a user device & settings situation, in combination with your applied styles. My understanding is that this is driven by Android's accessibility behaviour and is determined by the actual rendered size of elemenets.

brazen zephyr Jun 6, 2022, 2:32 PM

#

I can see that but why does this only apply to the stripe inputs and not everything else on the same page?

#

even zip code does this

#

the stripe elements on page load before tapping in them are identical in size.

#

and this is on my phone which does not have any custom accessibility settings.

#

Heck I hope i'm wrong and this is a simple fix, I appreciate you both helping me, i'm just trying to figure out a solution to this stripe specific element issue.

snow cairn Jun 6, 2022, 2:34 PM

#

I'm not sure -- it's unclear exactly what factors go into this and its difficult to reproduce on different devices

brazen zephyr Jun 6, 2022, 2:38 PM

#

Ok, well one thing that I noticed is it doesn't do it on your docs so perhaps that's a start for me

#

Thanks

snow cairn Jun 6, 2022, 2:38 PM

#

There are a number of stack overflow questions about similar cases with multiple strategies you can try:
https://stackoverflow.com/questions/7073396/disable-zoom-on-input-focus-in-android-webpage/11882296#11882296 (long answer)
https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone

Stack Overflow

Disable Auto Zoom in Input "Text" tag - Safari on iPhone

I made an HTML page that has an <input> tag with type="text". When I click on it using Safari on iPhone, the page becomes larger (auto zoom). Does anybody know how to disable this?

Stack Overflow

Disable zoom on input focus in Android webpage

Here's the dilema, I have a webpage (only for android devices) and in that page I have an input box (a text box specifically) and when it gets focus the browser zooms in. I don't want it to zoom in -

#Rook2022-android-zoom