Twenty Thirteen: Horizontal scroll bar appearing around 1600 width viewport

[johnhennmacc]

In Firefox 19 running on Ubuntu GNOME Remix 12.10, a horizontal scrollbar appears when the browser window is not maximised.

[bpetty]

I don't see a horizontal scrollbar in Ubuntu 12.04 / Firefox 19.0 unless the window is less than about 100px wide. This seems very reasonable and perfectly acceptable.

[johnhennmacc]

1920x1080 desktop with Firefox window of 1600x900

[johnhennmacc]

I have added an attachment with a Firefox window 1600 pixels wide and 900 pixels high on a desktop 1600 pixels wide and 1080 pixels high to show what I am seeing. It definitely is not widths of the order of 100 px that I am describing here. However, if this theme is to be responsive, does that cause trouble on mobile phone screens then because they're all that big?

[bpetty]

Well, I'm not seeing a problem at all, not even when I publish a page or post with an image bigger than 2000px wide (it is automatically scaled down in the post).

So it would help to figure out why you're seeing it. Can you please disable all Firefox extensions to make sure it's not one of the many add-ons you have installed that might be causing this?

If it's still adding the scrollbar after that, it would help if you had the site online somewhere we could look at it and inspect it ourselves so we can see exactly what is causing it.

[johnhennmacc]

Interestingly enough, there are no WordPress plugins activated (it's an offline test site that I have; haven't got to putting anything online for you, I'm afraid) and it seems to happen only with a width of around 1600 to 1610 pixels. If you use the Web Developer Toolbar, it may help you isolate the cause. Any images are only 600 px wide, by the way.

[lancewillett]

Can anyone else repeat this? @johnhennmacc could you link us to a live demo by any chance?

I'm going to keep it around for a bit longer but will suggest closing if no more evidence to repeat can be found.

[bpetty]

Thanks John, the tip of 1600 to 1610 pixels was the trick. I have been able to reproduce the problem, and see a possible solution as well.

The problem appears to be in the definition of 100% width for .site since the .site element also contains a 1px border on both the left and right (total of 2px added to 100%), so it ends up bigger than the window. I've attached a patch removing this, and everything *seems* to work fine still in Firefox, Chrome, and IE8, but this could probably use some additional testing.

[lancewillett]

I was able to repeat now also, thanks for the tip on 1600 being the breakpoint. @bpetty is correct about it being related to 100% width and using borders, but the solution isn't to remove the 100% width. Instead we should probably flip to a min-width media query here and apply the "large view" properties there instead: the borders, a width that accounts for the borders, and the max-width value.

[lancewillett]

Better support for > 1600 viewports to avoid the horizontal scrollbar

[lancewillett]

@obenland suggests using box-sizing here. Needs testing.

[obenland]

Could you please test that again with the latest trunk version? Maybe the universal box-sizing fixed it. Thanks!

[johnhennmacc]

It seems to be sorted now. There is no horizontal scroll bar turning up on me now until the widths are ridiculously small, which is how it should be. Thanks for looking into this.

[lancewillett]

With r23520 I can confirm it's fixed here, too, using Firefox 20.0 on Mac OS X Lion.