Yosemite broke my CSS buttons

Sometimes css bugs will come from the oddest places.

We had some strange css bug reports lately about our buttons “shifting” on hover. It’s something that just started happening out of the blue.

demonstration animation

We discovered the source of the problem when inspecting the computed css for one of the buttons:

Normally the font is Open Sans, but in the hover state the font changes to .HelveticaNeueDeskInterface-Regular.

The change in font is enough to cause the whole layout to shift. I'd never heard of such a ridiculous font. It was nowhere in our codebase, but a little google search for the font's name led us to this gist.

It seems that OS X Yosemite has changed the default user agent styles for rendering HTML buttons. The interesting thing, though, is that it doesn't just affect Safari users. It seems that other browsers draw their default button styles from the OS. This is why buttons for Google Chrome on Windows look different than buttons for Google Chrome on OSX.

The fix

To fix the problem all you need to do is add this chunk of code near the top of your css:

/* Yosemite fix for button text
/ see http://code.bloc.io/yosemite-broke-my-css-buttons/
*/
input[type="submit"], input[type="reset"], input[type="button"], button {  
  font-family: inherit;
  -webkit-font-smoothing: inherit;
}

This makes buttons use the same font that we use everywhere else.