6

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

Buttons look bad at 90% zoom

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

Buttons look fine at 67% zoom

7
  • 1
    We do not support any zoom levels other than 100%.
    – animuson StaffMod
    Feb 10 '16 at 5:50
  • 3
    @animuson w3.org/WAI/eval/preliminary.html#resize would suggest that you should support other zoom levels to cater for users with visual disibilities. Feb 10 '16 at 8:45
  • @animuson perhaps you should conduct a survey of what zoom levels your users actually use.
    – muru
    Feb 10 '16 at 8:48
  • 3
    @David Fwiw those buttons don't break if you zoom in, which is what a visually impaired person would do. Zooming out breaks pixels in half which is what causes issues like this, and is why we don't support it.
    – animuson StaffMod
    Feb 10 '16 at 8:51
  • @animuson: This should be easily fixable with a few simple CSS tweaks (and should make the rendering more stable at any zoom level). I have a meeting soon, but let me get back to this a bit later. Feb 10 '16 at 12:18
  • 1
    @animuson: Looks like this has been quietly fixed now (not using my suggest fix below, but the result is basically the same). Would you mind retagging this status-completed? Feb 22 '16 at 16:54
  • Yep, can confirm that this has been fixed
    – elssar
    Feb 23 '16 at 3:23
4

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.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .