Social login buttons CSS on the login/register page break when zoom less than 100%

Question

I prefer setting the default zoom on my browser to 90%. That causes the CSS on the login and registration pages to break.

Though the bug miraculously goes away when the zoom is at 67%

Answer 1

The problem is that the styling of those buttons is assuming that the widths of the inner divs add up exactly to the widths of the outer divs, with no rounding. This is generally a bad design practice, since it produces very brittle layouts that can easily break e.g. when the page is zoomed.

Instead, a better way to design an element that is divided into two parts would be to use the mechanism that CSS explicitly offers for that purpose: table layout. In this case, just styling the inner elements with display: table-cell (and getting rid of the existing layout hacks) would basically do the trick, like this:

#add-login-page div.major-provider .icon-container, #login-page div.major-provider .icon-container, #signup-page div.major-provider .icon-container,
#add-login-page div.major-provider .text, #login-page div.major-provider .text, #signup-page div.major-provider .text {
    display: table-cell;
    height: 38px;
    text-align: center;
    vertical-align: middle;
    float: none;
}
#add-login-page div.major-provider .icon, #login-page div.major-provider .icon, #signup-page div.major-provider .icon,
#add-login-page div.major-provider .text span, #login-page div.major-provider .text span, #signup-page div.major-provider .text span {
    display: inline-block;
    margin: 0;
}

You can inject the CSS above into the page (e.g. as a user style, or by editing the style sheet in the developer console), and it should fix this problem. To also fix a related scaling problem that occasionally leaves a white gap just inside the right border of the buttons when zoomed in, I'd also recommend setting the background colors directly on the buttons (rather than on the inner elements, like the current SE style sheet does):

#add-login-page .major-provider.google-login, #login-page .major-provider.google-login, #signup-page .major-provider.google-login {
    background: #e0492f;
}
#add-login-page .major-provider.facebook-login, #login-page .major-provider.facebook-login, #signup-page .major-provider.facebook-login {
    background: #395697;
}

(I take no blame for the long and repetitive selectors; the current SE style sheet has them too. I did add the div before .major-provider to make these selectors just slightly more specific than the ones in the SE style sheet.)

And yes, I'm going to add this CSS, or something like it, into the next version of my Stack Overflow Unofficial Patch (SOUP) user script.