Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Navbar buttons sub-pixel problem #3341

Closed
Benjaminsson opened this Issue · 20 comments

6 participants

@Benjaminsson

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.

@toddparker

Can you post a test page using jsbin using the latest code to illustrate this? Sounds like it just might be a rounding error.

@Benjaminsson

http://jsfiddle.net/JBenjaminsson/gcgRK/

Appears to work fine in Firefox but in Chrome and Mobile Safari you can see the glitch.
Hope jsFiddle is fine ;)

@toddparker

I just tried the fiddle and a jsbin version and don't see an issue on mobile safari or Chrome (Mac):
http://jsbin.com/obojav/edit
http://jsbin.com/obojav/

@fredefl

The issue also exists here! Using Chrome 16 on Win7.

@Benjaminsson

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

@toddparker

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.

@fredefl

@toddparker Yes it changes.

@toddparker

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?

@fredefl

@toddparker Will check now...

@fredefl

@toddparker Yes, i can see it in the docs too.

@agcolom
Collaborator

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

@jaspermdegroot
Collaborator

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.

@jaspermdegroot
Collaborator

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.

@mrextreme

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.

@jaspermdegroot
Collaborator

@Benjaminsson - I changed the title of this issue since it is not related to the persistent footer, but a general problem with the navbar.

@Benjaminsson

@uGoMobi Cool.
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.

@mrextreme

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

@jaspermdegroot
Collaborator

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

@jaspermdegroot
Collaborator

@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!

@Benjaminsson

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.