Google reCaptcha widget cut off in Chrome

Question

I'm trying to add a reCaptcha validation using react-google-recaptcha. Works fine but the widget is visually cut off in Chrome and I'm not sure how to fix it. Firefox renders the widget correctly.

I tried messing with the style (width, height, transform) and nothing worked.

Looks fine in Firefox:

But it breaks in Chrome

Code is here, there's nothing to it. Just using the most basic example. I tried both size options ('normal' and 'compact') and it didn't help either.

import React from 'react';
import {BrowserRouter as Router, Route, Routes} from "react-router-dom";
import './App.css';
import LogInForm from "./pages/user/LogInForm";
import Home from "./pages/home/Home";
import ReCAPTCHA from "react-google-recaptcha";


function App() {
    return (
        <Router>
            <Routes>
                <Route path="/login" element={<LogInForm/>}/>
                <Route path="/captcha" element={<ReCAPTCHA
                    sitekey="site key here"
                />}/>
                <Route path="/" element={<Home/>} />
            </Routes>
        </Router>
    );
}

export default App;

Any ideas on how to fix this? Or maybe some workaround?

Answer 1

Possibly caused by minimum font size in the browser settings. I had the same problem.

In my chrome it was set to 16. When decreasing to 12 my reCaptcha looks better.

I don't know if there is a workaround in code for this.