Transition issue in Safari 6. Text changes weight on mouse over

Hello everyone,

I am having an issue with my finished site in Safari 6. The button I have created changes the text font weight during the transition period of the hover but then returns to regular weight once the animation is done. I need this to work, I tried creating another thread with this problem a while back and nothing has fixed it. Is there any way to get this working correctly?

I made a video of the behavior: Dropbox - Error

Here’s my public link: https://webflow.com/design/cad?preview=f3feb026425d8a6b4e026cf971517902

do you want the font weight to change?

also, i see you have an opacity 90% on the off state, then hover state it goes to 100%. why?

The font weight should not change. The mouseover effect makes the button 100% from 90%, its an easy way to have interactivity without changing color styles.

@DFink, Safari has had traditionally wonky font handling, but here’s something you can try. In your code, add something like this:

<style> .button-class { -webkit-font-smoothing: antialiased; } </style>

Note that .button-class above should be the class of the actual button. I can’t tell what your class is because the public link doesn’t seem to work. Let me know if that helps at all.

Noticing this is still an issue in Safari 8.0.3. Bummer. Did you use callmevlad’s suggestion? Did it work?

Yes that script works and I use it on every site I build. Make sure you wrap in script tags