When resizing the browser window a gap with between 1-3 pixels appears in the right side of the navigation. This doesn't look bad in the example in the docs. I have however made a custom navbar where the color choice makes the gap very prominent. A solution (not the optimal one) would be to "spread out" the gap so that the left side nicks some of the gap and evens it out a bit.
Can you post a test page using jsbin using the latest code to illustrate this? Sounds like it just might be a rounding error.
Appears to work fine in Firefox but in Chrome and Mobile Safari you can see the glitch.
Hope jsFiddle is fine ;)
I just tried the fiddle and a jsbin version and don't see an issue on mobile safari or Chrome (Mac):
The issue also exists here! Using Chrome 16 on Win7.
@toddparker It can be a bit hard to spot. I made a screen shot where my firefox window is on top of my Chrome windows so you can see the difference. http://bit.ly/ue9efV
The bug appears in the jsbin too. I use Chrome 16.0.912.63 in Windows 7. Its in mobile safari, iPhone 4, ios 5.0.1, both landscape and portrait mode. Mobile Safari, iPad 2, ios 5.0.1 just portrait mode. And Safari 5.1.2 in Windows 7.
Works fine in IE9. I don't have access to a mac at work but will check as soon as i get home.
Yikes, that is subtle. If you re-size your browser, does the width of that change or is it always the same? If it changes, seems like a rounding error.
@toddparker Yes it changes.
When that happens, you just need to fiddle around with widths to try and force the rounding to look ok. Black magic territory that we probably won't want to get into. Is this rounding error only on your page or can you see this in the docs too?
@toddparker Will check now...
@toddparker Yes, i can see it in the docs too.
@Benjaminsson @fredefl is this still happening in latest? I've tested the following http://jsbin.com/obojav/4/ on iPod Touch iOS5.0.1 and all seems fine, but I couldn't see the screen shot, so checking with you to be sure.
This is a sub-pixel problem with percentage width. It depends on the total available width and how the browser round off whether there is a gap or not.
In this fiddle I set the width to 33.334% as @mrextreme suggested http://jsbin.com/ilibov/3/
The gap is still visible on certain screen widths but it seems smaller.
Before changing this we have to test all supported browsers to see if no wrapping occurs. Older versions of IE is already a problem because they round up (see #2270) and this might make it worse.
Of course that means that there is no real CSS solution to this, so with the 33.334% I was just lucky, because it works well for me, for that specific project with it's templates.
The ultimate solution: table :) ... or a JS script which fixes the div widths after the page is loaded into the DOM.
@Benjaminsson - I changed the title of this issue since it is not related to the persistent footer, but a general problem with the navbar.
I tried with 33,334. Yes, better but not ok. http://jsfiddle.net/gcgRK/3/
Works fine in ie9 and ie8 but ie7 gets some serious problems on certain widths. With and without your percentage adjustment.
I am fairly convinced that there is no good CSS solution to this, due to the nature of the issue. Use a table or some JS trick to have pixel-perfect widths. :(
@Benjaminsson - Maybe we can do something with a pseudo class that IE7 (and BB5 where the wrapping also occurs) don't understand to make adjustments. Will look into that.
Fixes #3341 - Filled gap caused by subpixel problem with negative mar…
@Benjaminsson - See PR #4514 which contains a link to a test page. Can you give it a try and let me know if the gap is fixed and no other issues occur? Thanks!
Great job! I've done some testing and have updated my test case with your code too. http://jsfiddle.net/gcgRK/4/
The gap is gone and it no longer breaks in IE7/IE8.