1

I'm trying to create those famous nav bars, but I'm encountering a weird problem...

I've created a JSFiddle that shows my code and my problem : JSFiddle

Basically when I'm hovering the "2" menu so that my dropdown-content is displayed as block (previously it was set to none) my whole document font-weight is changing...

Two things :

  • When I'm setting my .dropdown-content to display: block I'm not encountering this problem
  • Second when I'm setting my .head1 position to anything else than fixed I'm not encountering this problem

Thank you in advance for any clue !

And I forgot to mention but this only happens on Safari...

Antoine
  • 331
  • 1
  • 11

1 Answers1

2

Try adding

body{
  -webkit-font-smoothing: subpixel-antialiased;
}

to your CSS. Worked for me in Safari when I added it in your JSFiddle.

Please have a look at: Font weight turns lighter on Mac/Safari

Gustaf Gunér
  • 2,272
  • 4
  • 17
  • 23