Mac Safari Showing Different Font Weight on Other Menu Items. Cannot See in Other Browser Platforms

[toad78]

In Mac Safari, I hover over a menu item and the other menu items seem to change weight. I do not see this happening in Mac Chrome or Windows: Chrome, IE, Firefox.

Mac Safari:

normal

on hover

Is this a Mac Safari thing when it comes to using Google fonts? Would -webkit-font-smoothing: antialiased; make any difference?

[PaulOB]

Looks odd to me in all browsers because you are changing the font-weight on hover which causes a reflow and makes the page jiggle and fee very uncomfortable.

ul.dropdown a, ul.dropdown a:link, ul.dropdown a:visited, ul.dropdown li {
	font-weight: 400!important;
}
ul.dropdown a:hover, ul.dropdown li:hover, ul.dropdown li.parent:hover > a {
	color: #333!important;
	font-weight: 500!important
}

Never change an in-flow item to bold on hover as that means all the rest of the page (or items on the same line have to move to accommodate) end not very kind t those who suffer with epilepsy.

Try perhaps to add a text-shadow instead which doesn’t affect the flow or see here for more ideas.

[toad78]

Okay. I was told to make it a font weight. Changing it to use a text-shadow DEFINITELY made an improvement.

Thank you!