Menu icon Foundation

My Posts

No Content

My Comments

Vincent Pigoreau commented on Ryan Blaind's post over 5 years

Here are the button mixin args for Foundation 5 :

@mixin button($padding:$button-med, $bg:$primary-color, $radius:false, $full-width:false, $disabled:false, $is-prefix:false)

See: bower_components/foundation/scss/foundation/components/_buttons.scss

Vincent Pigoreau commented on Clement's post over 5 years

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)

Vincent Pigoreau commented on Clement's post over 5 years

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?

Vincent Pigoreau commented on Joop Vos's post almost 6 years

Did you install Bower globally?

 npm install -g bower

Posts Followed



Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Ryan Blaind's post over 5 years

Here are the button mixin args for Foundation 5 :

@mixin button($padding:$button-med, $bg:$primary-color, $radius:false, $full-width:false, $disabled:false, $is-prefix:false)

See: bower_components/foundation/scss/foundation/components/_buttons.scss

You commented on Clement's post over 5 years

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)

You commented on Clement's post over 5 years

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?

You commented on Joop Vos's post almost 6 years

Did you install Bower globally?

 npm install -g bower

Posts Followed

Following

  • No Content

Followers

  • No Content