Hollywood2520-web-elements | Stripe Developers | Page 1

spiral stream Apr 4, 2022, 4:41 PM

#

hello, checking. This is with CardElement from Stripe.js / Elements right?

hot moat Apr 4, 2022, 4:42 PM

#

I believe so. I used this to guide me. https://stripe.com/docs/payments/accept-a-payment?ui=elements

Accept a payment

Securely accept payments online.

spiral stream Apr 4, 2022, 4:42 PM

#

are you able to reproduce on https://stripe.dev/elements-examples/ ?

hot moat Apr 4, 2022, 4:43 PM

#

I could not reproduce the error

#

it seems that whenever it is trying to focus on the next field, it zooms in

#

I can show you the error if you wish

spiral stream Apr 4, 2022, 4:45 PM

#

yeah so it might be something with your integration, possibly with how your styles / accessibility stuff is set up?

#

what browser are you able to reproduce with on your end?

I used both mobile Safari and mobile Chrome (iOS) on the Stripe examples^ link and wasn't able to reproduce

hot moat Apr 4, 2022, 4:46 PM

#

Thing is that I copied and pasted the javascript

#

I've only tested on google pixel 6 pro chrome browser

#

I could try on an iphone to see

#

it looks fine on the iphone

spiral stream Apr 4, 2022, 4:56 PM

#

does Chrome on Pixel do the same on the Stripe examples too?

hot moat Apr 4, 2022, 4:56 PM

#

no

#

on the examples, it works just fine, on the same phone, it is not working fine.

#

on my website

spiral stream Apr 4, 2022, 4:58 PM

#

mind sharing your code for how you're instantiating CardElement and what style you're setting up for it?

hot moat Apr 4, 2022, 4:58 PM

#

sure, what would you like to see?

spiral stream Apr 4, 2022, 5:00 PM

#

well first, are you creating CardElement with a style?

hot moat Apr 4, 2022, 5:02 PM

#

📎 checkout.js

#

📎 status.js

spiral stream Apr 4, 2022, 5:09 PM

#

ok spoke to a really awesome coworker who explained what is happening here, they've explained it to a few users

basically when the calculated font size falls under a particular threshold, certain browser implementations do the "zoom" automatically to help users read clearly.

There are ways to accommodate and handle this - a couple suggestions laid out in https://stackoverflow.com/questions/7073396/disable-zoom-on-input-focus-in-android-webpage
OR
https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone?noredirect=1&lq=1

recommend giving those a shot and seeing what works fo ryou

hot moat Apr 4, 2022, 5:11 PM

#

Okay, great! I'll look into it and I'll get back to you! thanks!

spiral stream Apr 4, 2022, 5:11 PM

#

np!

hot moat Apr 4, 2022, 5:11 PM

#

Btw, best dev support system.

#

I actually get to talk to another developer not someone who I have to explain what their own system does.

#

Especially cause I don;t know how it works!

spiral stream Apr 4, 2022, 5:12 PM

#

that is why we're here! glad to help and collaborate!

#Hollywood2520-web-elements