Menu icon Foundation
Safari text weirdness with F5 topbar dropdown menu

I've got a Foundation 5 topbar menu (with an off-canvas menu for smaller screens) running fine in a Rails app. All looks as it should in Chrome and Firefox but in Safari, the font of all my topbar links thins dramatically when i hover the mouse over the dropdown menu. Is this a Foundation bug?

Normal

Hover

Foundation-5topbardropdownF5navigation

I've got a Foundation 5 topbar menu (with an off-canvas menu for smaller screens) running fine in a Rails app. All looks as it should in Chrome and Firefox but in Safari, the font of all my topbar links thins dramatically when i hover the mouse over the dropdown menu. Is this a Foundation bug?

Normal

Hover
Clement over 5 years ago

I should specify that i'm not using the topbar javascript due to Rails issues, just the styling. The dropdown uses the foundation dropdown javascript.

Vincent Pigoreau over 5 years ago

I have the exact same issue with Safari 7.0.3 and Foundation 5.2.2.
When I hover the dropdown menu, everything get thinner.

It seems to be caused by the .hover class added by foundation js on li.has-dropdown.
I tried to override this class in my _custom.scss file with no luck. None of the Foundation vars provided in _settings.scss did worked.

I am not sure but this might be caused by the fact I use a font with numeric font-weight (400 for normal, 700 for bold). This .hover class seems to re-apply somehow a font-weight to normal (which Safari doesn't get right).

Any clue? Someone?

Tyler Oakleaf over 5 years ago

I'm having the exact same problem. Any time the top bar drop down menus open the font weight changes. Only happens in safari. grrrr.

Vincent Pigoreau over 5 years ago

Finally found why.
Not a Foundation related thing but a rendering issue with fonts and css animation with Safari. (Foundation dropdown has animation).

See details here:
http://stackoverflow.com/questions/9733011/safari-changing-font-weights-when-unrelated-animations-are-running

http://stackoverflow.com/questions/14026597/safari-applying-font-effect-treatment-when-element-is-css3-animated?lq=1

There are several fixes but sadly nothing perfect. In short:
add this on the elements that suffer from this bug:

webkit-font-smoothing: antialiased;

This worked for me at a price of a thinner font rendering.

or
- add position:relative and a z-index
Trickier bc it will be hard to integrate with the css that format the links in the navbar. (The .dropdown needs absolute positioning, not relative)