Navbar buttons sub-pixel problem #3341

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

Comments

Projects
None yet
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

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Jan 1, 2012

Contributor

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

Contributor

toddparker commented Jan 1, 2012

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

This comment has been minimized.

Show comment
Hide comment
@Benjaminsson

Benjaminsson Jan 2, 2012

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

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

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Jan 2, 2012

Contributor

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/

Contributor

toddparker commented Jan 2, 2012

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

This comment has been minimized.

Show comment
Hide comment
@fredefl

fredefl Jan 2, 2012

Contributor

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

Contributor

fredefl commented Jan 2, 2012

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

@Benjaminsson

This comment has been minimized.

Show comment
Hide comment
@Benjaminsson

Benjaminsson Jan 3, 2012

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

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Jan 3, 2012

Contributor

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.

Contributor

toddparker commented Jan 3, 2012

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

This comment has been minimized.

Show comment
Hide comment
@fredefl

fredefl Jan 3, 2012

Contributor

@toddparker Yes it changes.

Contributor

fredefl commented Jan 3, 2012

@toddparker Yes it changes.

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Jan 3, 2012

Contributor

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?

Contributor

toddparker commented Jan 3, 2012

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

This comment has been minimized.

Show comment
Hide comment
@fredefl

fredefl Jan 3, 2012

Contributor

@toddparker Will check now...

Contributor

fredefl commented Jan 3, 2012

@toddparker Will check now...

@fredefl

This comment has been minimized.

Show comment
Hide comment
@fredefl

fredefl Jan 3, 2012

Contributor

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

Contributor

fredefl commented Jan 3, 2012

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

@agcolom

This comment has been minimized.

Show comment
Hide comment
@agcolom

agcolom May 24, 2012

Member

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

Member

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.

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot May 24, 2012

Member

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.

Member

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

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot May 24, 2012

Member

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.

Member

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

@mrextreme

This comment has been minimized.

Show comment
Hide comment
@mrextreme

mrextreme May 25, 2012

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.

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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot May 25, 2012

Member

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

Member

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

@Benjaminsson

This comment has been minimized.

Show comment
Hide comment
@Benjaminsson

Benjaminsson May 28, 2012

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

@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

This comment has been minimized.

Show comment
Hide comment
@mrextreme

mrextreme May 28, 2012

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

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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jun 1, 2012

Member

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

Member

jaspermdegroot commented Jun 1, 2012

@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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jun 12, 2012

Member

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

Member

jaspermdegroot commented Jun 12, 2012

@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

This comment has been minimized.

Show comment
Hide comment
@Benjaminsson

Benjaminsson Jun 13, 2012

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.

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.

gseguin pushed a commit to gseguin/jquery-mobile that referenced this issue Jun 27, 2012

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