Navbar width issue when in header or footer and has >= 3 buttons

[cricto]

There's an issue in the JQM css that causes the navbar to exceed the width of the rest of the page on mobile devices when the navbar is in the header or footer and contains 3 or more buttons. This results in a thin white line to the right of the page when viewing on a mobile device and "pulling" the page to the left. You can also notice this on desktop browsers, if you hold click and move the mouse to the right edge of the browser.

Test page: http://jsbin.com/onibuc/99

I fixed it by changing ".ui-navbar ul" overflow from visible to hidden (line 1920 of jquery.mobile-1.3.0-beta.1.css). It would, I think, be a good idea for this change to be made in the next release.

[jaspermdegroot]

@cricto

I see what you mean. You see a bit of the page background. In general we recommend to set a theme on the page instead of on the content because you get to see the page background below the footer as well. But that is up to you of course.

At first we did use overflow: hidden; but we had to remove that because buttons didn't work anymore on Android if the toolbar has position fixed. See #4663.

Maybe we can set it overflow: hidden; on another container to prevent this, without breaking things.