navbar-fixed-top click behavior with Safari v7.0

[servelink]

Applying navbar-fixed-top to the navbar class adds unwanted behavior when forms or drop downs are used in the navbar.

This can be seen in the BS examples;

1. try clicking in a form field at http://getbootstrap.com/examples/jumbotron/ and watch the "Project Name" text and green button text change to a finer/'less bold'/grayed out version.
2. try opening the drop down at http://getbootstrap.com/examples/theme/ and again watch the surrounding navbar text.

This is most noticeable on the inverse navbar but occurs on both. The scrolling navbar is not affected (so this cannot be by design).

[cvrebert]

@sierranevada What browser and OS? I'm not noticing any differences on Mac Chrome.

[servelink]

Safari latest on OS X latest.

[cvrebert]

So, Safari v7.0 on Mavericks?

[servelink]

Yes, that's right.

[erlingur]

+1 on this. Fine on Chrome but Safari 7 on Mavericks has this problem. This has something to do with position: fixed; here: https://github.com/twbs/bootstrap/blob/master/less/navbar.less#L129

[erlingur]

@sierranevada I fixed this by adding -webkit-font-smoothing: subpixel-antialiased; to .navbar-fixed-top.

Edit: You could also use -webkit-font-smoothing: antialiased; if you want.

[servelink]

@erlingur Nice, that works well for me, thanks.

[erlingur]

@sierranevada No problem, glad I could help!

[mdo]

If this is a font smoothing issue, we won't be doing anything about it. We avoid using that in Bootstrap.

If you want that behavior everywhere in OS X, turn off LCD font smoothing in System Preferences.

[erlingur]

I believe this is actually a regression in Safari 7. This was fixed in Safari 6 I think and then it resurfaced in 7. This should hopefully be fixed in the coming patches.

Edit: Meaning yes, I agree with closing this issue, it's not really relevant to Bootstrap itself.

[tolgamorf]

@erlingur many thanks for the fix. I was going crazy 👍

.navbar-fixed-bottom also has the same problem, so I added the following to my CSS:

.navbar-fixed-top,
.navbar-fixed-bottom {
  -webkit-font-smoothing: antialiased;
}

[erlingur]

@tolgamorf No problem! :)