Make WordPress Core

Opened 11 years ago

Closed 11 years ago

#23583 closed defect (bug) (fixed)

Twenty Thirteen: Horizontal scroll bar appearing around 1600 width viewport

Reported by: johnhennmacc's profile johnhennmacc Owned by:
Milestone: 3.6 Priority: low
Severity: normal Version: 3.6
Component: Bundled Theme Keywords: has-patch
Focuses: Cc:


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

Attachments (3)

2013.jpg (154.7 KB) - added by johnhennmacc 11 years ago.
1920x1080 desktop with Firefox window of 1600x900
23583.patch (364 bytes) - added by bpetty 11 years ago.
23583.2.patch (687 bytes) - added by lancewillett 11 years ago.
Better support for > 1600 viewports to avoid the horizontal scrollbar

Download all attachments as: .zip

Change History (16)

#1 @SergeyBiryukov
11 years ago

  • Component changed from Themes to Bundled Theme

#2 @bpetty
11 years ago

  • Summary changed from Twenty Thirteeen: Horizontal scroll bar appearing to Twenty Thirteen: Horizontal scroll bar appearing

#3 @bpetty
11 years ago

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.

Last edited 11 years ago by bpetty (previous) (diff)

11 years ago

1920x1080 desktop with Firefox window of 1600x900

#4 @johnhennmacc
11 years ago

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?

#5 @bpetty
11 years ago

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.

#6 @johnhennmacc
11 years ago

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.

#7 @lancewillett
11 years ago

  • Keywords close added
  • Priority changed from normal to low

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.

#8 @bpetty
11 years ago

  • Cc bpetty added
  • Keywords has-patch needs-testing added; needs-patch close removed

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.

11 years ago

#9 @lancewillett
11 years ago

  • Milestone changed from Awaiting Review to 3.6
  • Summary changed from Twenty Thirteen: Horizontal scroll bar appearing to Twenty Thirteen: Horizontal scroll bar appearing around 1600 width viewport

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.

11 years ago

Better support for > 1600 viewports to avoid the horizontal scrollbar

#10 @lancewillett
11 years ago

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

#11 @obenland
11 years ago

  • Keywords reporter-feedback added

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

#12 @johnhennmacc
11 years ago

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.

#13 @lancewillett
11 years ago

  • Keywords needs-testing reporter-feedback removed
  • Resolution set to fixed
  • Status changed from new to closed

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

Note: See TracTickets for help on using tickets.