Bug 32535 – Links move a little when hovered over, when using custom fonts and webkit-transform rotation.

• Status: NEW
• Component: Text

[Cabel Sasser]

Created attachment 44829 [details]
An animated gif showing the shifting.

That's one mouthful of a summary. Let me explain:

SETUP:
- We're using @font-face to load custom fonts from TypeKit. 
- Then we're putting that custom text in a <div> that is rotated slightly using -webkit-transform: rotate().
- Contained within the text itself are some links.

STEPS TO REPRODUCE:
Hover over any of the handwritten-styled links in the body of the sample URL.

RESULTS:
The text moves very slightly — one pixel down, one pixel to the left? — until locking into place. It looks weird.
When the browser is refreshed, it happens again, until they've all been hovered over.

EXPECTED:
The text does not move at all when hovered over.

NOTES:
The particular font is called "Good Dog". It's not happening with the typewriter text in the header of the card, so maybe it's particular to this font? A bug in the font?
The attached animated .gif shows the shifting.

[Simon Fraser (smfr)]

The element in question has a 0.03deg rotation, so I think there's some pixel rounding in CG going on here.

[Cabel Sasser]

(Note that, in this particular case, the rotation is randomly chosen via Javascript on page load. But applying a fixed rotation would undoubtedly work as well. Let me know if you need a reduced test case.)

[Simon Fraser (smfr)]

A reduced testcase that doesn't rely on TypeKit would be good.

[Cabel Sasser]

(In reply to comment #3)
> A reduced testcase that doesn't rely on TypeKit would be good.

No problem. Here's a page that doesn't link to TypeKit. The font is included in a static CSS file.

http://www.panic.com/~cabel/safari-32535.html

However, when I tried to create a quick barebones test case:

http://www.panic.com/~cabel/safari-32535-reduced.html

The problem does _not_ show up. As I'm sure you're familiar with, it'll take some time to try to isolate the element that triggers it...

[Cabel Sasser]

(In reply to comment #3)
> A reduced testcase that doesn't rely on TypeKit would be good.

Simon,

We finally got around to narrowing down the element that causes the shifting. This example also does not require TypeKit.

I must say, it's a mystery, though. :)

Check this out:

http://www.panic.com/~cabel/safari-32535-reduced-working.html

There's a <span> at the bottom ("I am the span responsible for text shifting!"). If you comment out that <span>, the text shifting when you hover over a link goes away. If you include it, the text shifting comes back.

Let me know if there's anything else we can do to help.

[Simon Fraser (smfr)]

Thanks for the testcase. I think it could be reduced a lot more though. Bring all the CSS into the document, and hack away until everything unneeded is gone.

[Cabel Sasser]

(In reply to comment #6)
> Thanks for the testcase. I think it could be reduced a lot more though. Bring
> all the CSS into the document, and hack away until everything unneeded is gone.

OK, then. :)

Here's as reduced as we can make it. Everything is inline, and only necessary bits are included in the code.

http://www.panic.com/~cabel/safari-32535-micro.html

Once again, hovering over the links shifts the letters slightly. It drives us crazy. The rest is up to you! :) We're super curious. Good luck!

(I've removed the other pages to avoid confusion.)

[Simon Fraser (smfr)]

Created attachment 46386 [details]
Testcase

Always better to have the testcase in Bugzilla. External links have a habit of going 404.

Thanks!

[Cabel Sasser]

(Removed NeedsReduction from Keywords. Hope that was the right thing to do.)

(In reply to comment #9)
> (Removed NeedsReduction from Keywords. Hope that was the right thing to do.)

Yes. You could have also added the HasReduction keyword, like I just did.

[Simon Fraser (smfr)]

<rdar://problem/8169180>