Stripe carelement:在点击CVC字段时不正确地放大方式- Chrome Android

Question

这个问题一直很难确定。基本上，我的网站使用条纹元素(React Stripe JS)，我注意到在我使用Chrome 101.0.4951.61 (Android 12)的Pixel 3a上，当我点击CVC字段时，浏览器会放大。这适用于React 17.0.2和React 16.13.1。另外还有Chrome版本的Moto G Play 2021。在iOS设备上似乎不支持。

我不知道它是否相关，但我在本地使用IIS (ASP)。. NET 6)，尽管这个问题似乎是客户端特有的。

为了开始研究，我浏览了类似的Stripe示例，并且没有在该代码中再现此行为。

然后我假定问题出在我实现Elements字段的方式上。但是，我删除了几乎所有东西，包括所有CSS和所有JS库，除了react。我仍然在局部看到问题。

以下是我本地复制的相关文件:

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();

和CreditCardForm:

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

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

如果有帮助的话，下面是我精简后的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"
}
}

当我在整理我的样本时，我比较了:https://codesandbox.io/s/3qcsr我吃了进去。https://codesandbox.io/s/react-stripe-js-minimal-forked-repro-attempt-jb43o4?file=/src/index.js基本上移除所有样式。这两种方法都不能重现问题。我不知道我的代码与这些沙盒有什么不同。我可以试着发布一篇报道，但是现在，我想知道是否有人看到过类似的行为。

这是我手机上拍摄的一段视频，显示了有问题的行为。简单地点击CVC领域会使它变得超级放大。这不会发生在任何其他字段。

https://vimeo.com/714970463

(我建议你全屏播放视频;否则CVC字段将被工具栏按钮覆盖)

Answer 1

我想我找到问题了。在_ValidationScriptsPartial。cshtml，我没有意识到我正在加载一些jquery验证库。我早就不再使用jquery了。移除这些杂物似乎已经解决了这个问题。我希望这能对别人有所帮助。

<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>