Make WordPress Core

Opened 12 years ago

Closed 11 years ago

Last modified 11 years ago

#23817 closed defect (bug) (fixed)

Collapse menu button not working if browser size is 911px width

Reported by: alexvorn2's profile alexvorn2 Owned by: azaozz's profile azaozz
Milestone: 3.6 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-patch
Focuses: Cc:

Description

After I added a metabox to the edit page of the post, from here:

http://codex.wordpress.org/Function_Reference/add_meta_box

the collapse but does not work if the browser size is 911px, need to refresh the page after resize to see the bug.

My browser is Firefox (latest), Windows 7

I use this for browser size check - http://whatsmy.browsersize.com/

Attachments (1)

23817.patch (1.3 KB) - added by azaozz 11 years ago.

Download all attachments as: .zip

Change History (10)

#1 @SergeyBiryukov
12 years ago

  • Component changed from General to Administration

Confirmed in Firefox by resizing the browser window to 911px using Web Developer extension. Nothing happens after clicking the "Collapse menu" link.

Adding a meta box is not relevant, confirmed without that as well.

Related: #21795

#3 @alexvorn2
12 years ago

  • Keywords has-patch added

#4 @azaozz
12 years ago

Confirmed. Happens for body width between 884px and 899px (as reported by Firebug's "Layout"). Caused by difference in calculating the body width, i.e. the responsive css kicks in at 883px rather than at 899px. Seems the 15px difference is caused by the width of the scrollbar, works properly if there's no vertical scrollbar.

@Sergey, this is currently a double-double switch:

  • Above 900px is sets 'folded' or 'auto'.
  • Below 900px is sets "unfolded' or 'auto'.

The 'auto' is handled with responsive css. We could make it a normal three-way switch: always folded, always unfolded or auto, perhaps by changing the text "Collapse menu" to "Auto collapse" and the icon to... something else than arrow.

Last edited 12 years ago by azaozz (previous) (diff)

#5 @bpetty
12 years ago

  • Milestone changed from Awaiting Review to 3.6

Moving to 3.6 as #21795 has a fix which is set for 3.6 already.

@azaozz
11 years ago

#6 @azaozz
11 years ago

WebKit excludes the width of the vertical scrollbar when calculating when to apply the CSS "@media screen and (max-width: 900px). The calculated width matches $(window).width(). Firefox and IE > 8 include the scrollbar width, so after the jQuery normalization $(window).width() is 884px but window.innerWidth is 900px. 23817.patch is based on that.

Also using window.innerWidth excludes IE < 9 that don't support @media.

#7 @azaozz
11 years ago

  • Owner set to azaozz
  • Resolution set to fixed
  • Status changed from new to closed

In 24619:

Collapse Menu: use jQuery normalized window width only for WebKit. Use window.innerWidth in Firefox, IE > 8, etc. so the window width in JS and for the @media rules match. Fixes #23817.

#8 @kadamwhite
11 years ago

Can't comment on the issue where media queries fire without accounting for the scrollbar, but the class utility methods can take a space-separated list of class names, which may be cleaner: body.removeClass('auto-fold').removeClass('folded'); could be simplified to body.removeClass('auto-fold folded')

#9 @azaozz
11 years ago

Some tests: the browser window is resized to the trigger point for @media only screen and (max-width: 900px). The JS is:

console.log('jQuery(window).width() = %s, jQuery(window).innerWidth() = %s, window.innerWidth = %s', jQuery(window).width(), jQuery(window).innerWidth(), window.innerWidth );

Results

  • With vertical scrollbar:
    Chrome 27.0.1453.116
    jQuery(window).width() = 900, jQuery(window).innerWidth() = 900, window.innerWidth = 917
    
    Firefox 22.0
    jQuery(window).width() = 883, jQuery(window).innerWidth() = 883, window.innerWidth = 900
    
    IE10 10.0.6
    jQuery(window).width() = 883, jQuery(window).innerWidth() = 883, window.innerWidth = 900
    
  • Without scrollbar:
    Chrome 27.0.1453.116
    jQuery(window).width() = 900, jQuery(window).innerWidth() = 900, window.innerWidth = 900
    
    Firefox 22.0
    jQuery(window).width() = 900, jQuery(window).innerWidth() = 900, window.innerWidth = 900
    
    IE10 10.0.6
    jQuery(window).width() = 900, jQuery(window).innerWidth() = 900, window.innerWidth = 900
    
Note: See TracTickets for help on using tickets.