Google's sign in button resizes after loading

Question

I am following https://developers.google.com/identity/gsi/web/guides/display-button#javascript to add Google sign-in to my ReactJS app.

I added

 <script>
      function handleCredentialResponse(response) {
        console.log("Encoded JWT ID token: " + response.credential);
      }

      window.onload = function () {
        google.accounts.id.initialize({
          client_id: "YOUR_GOOGLE_CLIENT_ID",
          callback: handleCredentialResponse,
        });
        google.accounts.id.renderButton(
          document.getElementById("buttonDiv"),
          { theme: "filled_blue", size: "large", shape: "pill" } // customization attributes
        );
        google.accounts.id.prompt(); // also display the One Tap dialog
      };
</script>

in index.html, and in my component, I have a <div id="buttonDiv"></div>.

However, this is what happens when I reload the page:

The initial button loaded is correct, but somehow is resized. I paused the JS execution in the debugger and found out that the initial button was purely divs, but after resizing, it used an iframe instead.

Answer 1

I finally discovered the issue. The problem happens if you set the width as a float instead of an integer. For example

google.accounts.id.renderButton(
   document.getElementById("buttonDiv"),
   { type: "standard", theme: "filled_blue", size: "large", shape: "rectangular", width: "350.043", logo_alignment: "left" } // customization attributes
);

will cause the button's width to resize.

However,

google.accounts.id.renderButton(
       document.getElementById("buttonDiv"),
       { type: "standard", theme: "filled_blue", size: "large", shape: "rectangular", width: "350", logo_alignment: "left" } // customization attributes
    );

will not.