Supplemental explanation about customizing user interface with Azure Active Directory B2C (AD B2C)

This article supplementary describes the article of Azure Active Directory B2C: Customize the Azure AD B2C user interface (UI).

Reordering social ID providers on the sign-in page

Social providers order seems to be constant on the sign-in page.
Though I wanted to change the order, the HTML code corresponding it is in an untouchable part.
So I changed it with CSS Flexbox.

.options {
  display: flex;
  flex-direction: column;
  div{
    margin-bottom: 15px;
  }
  div:nth-child(4){
    order: -5; // twitter
  }
  div:nth-child(3){
    order: -4; // facebook
  }
  div:nth-child(2){
    order: -3; // google
  }
  div:last-child {
    order: -2; // github
  }
  div:first-child {
    order: 10; // microsoft
  }
}

Applying an order property, the order can be changed.
This sample is that when chosen twitter, facebook, google, GitHub and Microsoft.
Note that original order will be changed depending on the chosen providers.

The issue that the sign-in page is automatically scrolled up to the mail form when on loading on iOS Safari

Though I wanted to have priority to social account over e-mail account, it was not possible by default.
Because the page is automatically scrolled up to e-mail input form when loaded the sign-in page on iOS Safari.

As UI customizing can't be used Javascript, e-mail input focus can't be controlled.

So I solved that by force with CSS animation.

.localAccount{
  position: relative;
  animation: fade 1ms ease;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-fill-mode: backwards;
  z-index: 10;
}

@keyframes fade {
  0% {
    transform: translateY(-100vh);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

localAccount class that is email section is moved up an amount to 1 screen, will be moved to the original position 1 second later.
This stops the page from scrolling.