Skip to content
This repository

Navbar buttons sub-pixel problem #3341

Closed
Benjaminsson opened this Issue December 27, 2011 · 20 comments

6 participants

Johan Benjaminsson Jasper de Groot Todd Parker Frederik Lassen Anne-Gaelle Colom
Johan 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.

Todd Parker

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

Johan 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 ;)

Todd Parker

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/

Frederik Lassen

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

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

Todd Parker

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.

Frederik Lassen

@toddparker Yes it changes.

Todd Parker

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?

Frederik Lassen

@toddparker Will check now...

Frederik Lassen

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

Anne-Gaelle Colom
Collaborator
agcolom commented May 24, 2012

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

Jasper de Groot
Owner
uGoMobi commented May 24, 2012

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.

Jasper de Groot
Owner
uGoMobi commented May 24, 2012

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.

Jasper de Groot
Owner
uGoMobi commented May 25, 2012

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

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

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

Jasper de Groot
Owner

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

Jasper de Groot uGoMobi referenced this issue from a commit in uGoMobi/jquery-mobile June 12, 2012
Jasper de Groot Fixes #3341 - Filled gap caused by subpixel problem with negative mar…
…gin.
ae3ac05
Jasper de Groot
Owner

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

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

Jasper de Groot uGoMobi closed this in c25f9e4 June 16, 2012
Ghislain Seguin gseguin referenced this issue from a commit in gseguin/jquery-mobile June 12, 2012
Jasper de Groot Fixes #3341 - Filled gap caused by subpixel problem with negative mar…
…gin.
de4c577
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.