Stripe CardElement: Incorrectly zooms way in when tapping on CVC field - Chrome Android

Question

This issue has been super tough to pin down. Basically, my site uses Stripe Elements (React Stripe JS) and I noticed on my Pixel 3a using Chrome 101.0.4951.61 (Android 12), that when I would tap on the CVC field, the browser zooms WAY in. This repros on React 17.0.2, and React 16.13.1. Also repros on a Moto G Play 2021 in Chrome. Does not seem to repro on iOS devices.

I don't know if it's relevant, but I'm working locally with IIS (ASP.NET 6), though this problem seems to be client-side specific.

To start investigating, I browsed similar Stripe examples, and did not repro this behavior in that code.

I then presumed the problem is with the way I'm implementing the Elements field. But, I've removed pretty much everything, including all CSS and all JS libraries other than react pretty much. I still see the problem locally.

Here are the relevant files from my local repro:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Elements } from '@stripe/react-stripe-js';
import { loadStripe } from '@stripe/stripe-js';
import CreditCardForm from './components/Example/CreditCard/CreditCardForm';


function renderApp() {

    const stripePromise = loadStripe("pk_test_[XXXXXXXX]");

    ReactDOM.render(
        <Elements stripe={stripePromise}>
            <CreditCardForm  />
        </Elements>,
        document.getElementById('react-app')
    );
}

renderApp();

and CreditCardForm:

import { CardElement } from '@stripe/react-stripe-js';
import * as React from 'react';



const InjectedCheckoutForm = () => {

    return (<CardElement  />);
};
export default InjectedCheckoutForm;

If it's helpful, here's my slimmed down package.json:

{
  "name": "-",
  "private": true,
  "description": "",
  "license": "Private",
  "repository": "",
  "version": "1.0.0",
  "scripts": {
    "build": "webpack --mode=development --watch",
    "test": "jest",
    "release": "webpack --mode=production",
    "publish": "npm run release && dotnet publish -c Release"
  },
  "dependencies": {
    "@stripe/react-stripe-js": "1.8.1",
    "@stripe/stripe-js": "1.30.0",
    "react": "16.13.1",
    "react-dom": "16.13.1"
  },
  "devDependencies": {
    "@types/node": "17.0.35",
    "@types/react": "17.0.39",
    "@types/react-dom": "17.0.13",
    "ts-loader": "9.3.0",
    "tslib": "2.4.0",
    "typescript": "4.7.2",
    "webpack": "5.72.1",
    "webpack-cli": "4.9.2"
  }
}

As I was widdling down my sample, I was comparing with: https://codesandbox.io/s/3qcsr which I forked into: https://codesandbox.io/s/react-stripe-js-minimal-forked-repro-attempt-jb43o4?file=/src/index.js and basically removes all styling. Neither of these reproduces the problem. I don't know what is different about my code vs these sandboxes. I can try to post a repro of this, but for now, I was wondering if anyone else has seen similar behavior.

Here's a video taken from my phone showing the problematic behavior. Simply tapping on the CVC field causes it to become super zoomed in. This doesn't happen for any other field.

https://vimeo.com/714970463

(I suggest you play the video full screen; otherwise the CVC field is covered by a toolbar button)

score 0 · Answer 1 · answered May 31 '22 at 01:53

I believe I found the problem. In _ValidationScriptsPartial.cshtml , I didn't realize that I was loading some jquery-validation libraries. I've long since moved away from jquery. Removing this cruft seems to have addressed the issue. I hope this can help others.

<environment include="Development">
    @*<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>*@
    @*<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>*@
</environment>
<environment exclude="Development">
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"
            asp-fallback-src="~/lib/jquery-validation/dist/jquery.validate.min.js"
            asp-fallback-test="window.jQuery && window.jQuery.validator"
            crossorigin="anonymous"
            integrity="sha384-Fnqn3nxp3506LP/7Y3j/25BlWeA3PXTyT1l78LjECcPaKCV12TsZP7yyMxOe/G/k">
    </script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.validation.unobtrusive/3.2.6/jquery.validate.unobtrusive.min.js"
            @*asp-fallback-src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"*@
            asp-fallback-test="window.jQuery && window.jQuery.validator && window.jQuery.validator.unobtrusive"
            crossorigin="anonymous"
            integrity="sha384-JrXK+k53HACyavUKOsL+NkmSesD2P+73eDMrbTtTk0h4RmOF8hF8apPlkp26JlyH">
    </script>
</environment>

Stripe CardElement: Incorrectly zooms way in when tapping on CVC field - Chrome Android

1 Answers1