Search code examples
csshoverblockfixeddisplay

Font weight is changing on displaying as block

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

Solution

  • 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