Streaming live at 10am (PST)

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


#1

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: https://www.dropbox.com/s/92c2z5pm43b4dom/webflowbuttonissue.mov

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


#2

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?


#3

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.


#4

@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.


#5

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


#6

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


#7