Bad sizing on "Sign in with Apple" button caused by CSS

Hello.


I tried this morning to re-enable the Sign in With Apple on our website, and noticed that the button disaply was incorrect, without any change to the code. After debugging, we discovered that the CSS style injected by appleid.auth.js is incorrect.

The div that the javascript generates forces the size to {width: 100%px, height: 100%px}, which is incorrect. Setting it manually to 100% fixed the issue.


I have temporarily fixed this by adding

.apple-signin > div {
  width: 100% !important;
  height: 100% !important;
}


to my css. Can this be officially fixed in the javascript, though?

Post not yet marked as solved Up vote post of marco_fing Down vote post of marco_fing
2.8k views

Replies

Find the same issue here. This is a bug. Thanks for sharing your temporary solution!

Hi marco_fing, did you mean:

<html>
  <head>
  <meta name="appleid-signin-client-id" content="[CLIENT_ID]">
  <meta name="appleid-signin-scope" content="[SCOPES]">
  <meta name="appleid-signin-redirect-uri" content="[REDIRECT_URI]">
  <meta name="appleid-signin-state" content="[STATE]">
  </head>
  <style>
  .signin-button {
  width: 100% !important;
  height: 100% !important;
  }
  </style>
  <body>
  <div id="appleid-signin" class="signin-button" data-color="black" data-border="true" data-type="sign in"></div>
  <script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
  </body>
</html>

Same issue here,

the above code is copy from the SignIn with Apple Id js document,

can I just replace the line #10, #11 to resolving the problem?

sorry, I'm newer~~

I couldn't change the height of the button with official document indications.

My solution is:


.signin-button > div > div > svg {
        height: 50px;
        width: 100%;
        
    }

By the way what i've found in Apple's official javascript injection is quite weird.
Did you see

<div id="appleid-signin" class="signin-button" data-color="white" data-border="false" data-type="sign in"></div>
*check injected css*
with: 100%px;
height: 100%px


"px" and "%" as a value at the same time? (I couldn't put a screenshot here)

I guess this needs more modification in time.

I saw those invalid CSS widths and heights too, dejaworks. They're effectively being ignored in chrome, but definitely not correct syntax!

I've submitted feedback via https://feedbackassistant.apple.com/ about this.