Unstoppable Robot Ninja

The site navigation:

Webkit bug YAY!

So this is somewhat interesting. Here’s the skinny:

  • Let’s say you’re using a WebKit-based browser.
  • Let’s also say that you’re mucking around with a little @font-face, along with a few other CSS shinies.
  • Now, let’s also also say that you’re mucking around with -webkit-transition, a less-than-standard but still somewhat sexy stylesheet property—specifically, you’re applying a CSS transition to a link when the user hovers over it.

What’s the result? Well, if you’re hovering over the link while your text is being resized, it looks something like this:

So in short, -webkit-transition and @font-face produce a weird, freaky love child visual bug if you’re hovering over a link and resizing your text. The text will temporarily revert to the next non-@font-face font in the stack—Helvetica above—before re-applying the proper typeface.

Which, yes, I realize probably nobody will do. Still, I think it’s kind of an interesting little tic. Plus, it affects all WebKit-based desktop browsers I tested on, notably Safari and Chrome. Remove the @font-face assignment or the -webkit-transition, and the bug goes away.

Granted, it’s no systemic rounding error, but hey: what is?

This is a blog entry posted on day 11936 in the Journal.

4 comments posted.

4 Comments

  1. Kyle Weems says:

    Well, they can’t all be systemic rounding errors, but that’s a good one to know. Especially since I’m diving into transitions now, and been fiddling with using @font-face more and more.

    This will save me the pain of discovering it myself.

  2. Jenn Lukas says:

    Bug? pssh…that’s what we here in the ‘how to make easter eggs out of comic sans” club call a feature!!
    Thanks!!

  3. Dan Ott says:

    Man, that’s weird. I used scale() on link hovers to some success on my site, but had to use display:inline-block to get it running, which was a little hacky. Worked with @font-face, though.

  4. Markus Schwarz says:

    Hi Ethan,
    the same Effect happens when you reload a page with Fonts included and on :hover when the hover-style contains the font description.

This was Ethan Marcotte’s Unstoppable Robot Ninja.

You are welcome.

Design and content © 2014 Ethan Marcotte. All rights reserved.

Photo copyright © Capcom.

Skip to the navigation, or skip to main content.