New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
servelink opened this Issue Nov 2, 2013 · 12 comments

Comments

Projects
None yet
5 participants
@servelink

servelink commented Nov 2, 2013

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

This comment has been minimized.

Member

cvrebert commented Nov 2, 2013

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

@servelink

This comment has been minimized.

servelink commented Nov 2, 2013

Safari latest on OS X latest.

@cvrebert

This comment has been minimized.

Member

cvrebert commented Nov 2, 2013

So, Safari v7.0 on Mavericks?

@servelink

This comment has been minimized.

servelink commented Nov 2, 2013

Yes, that's right.

@erlingur

This comment has been minimized.

erlingur commented Nov 15, 2013

+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

This comment has been minimized.

erlingur commented Nov 15, 2013

@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

This comment has been minimized.

servelink commented Nov 16, 2013

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

@erlingur

This comment has been minimized.

erlingur commented Nov 16, 2013

@sierranevada No problem, glad I could help!

@mdo

This comment has been minimized.

Member

mdo commented Nov 30, 2013

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.

@mdo mdo closed this Nov 30, 2013

@erlingur

This comment has been minimized.

erlingur commented Dec 2, 2013

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

This comment has been minimized.

tolgamorf commented Dec 26, 2013

@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

This comment has been minimized.

erlingur commented Jan 3, 2014

@tolgamorf No problem! :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment