Make WordPress Core

Opened 7 years ago

Closed 6 years ago

#33143 closed defect (bug) (worksforme)

Twenty Fifteen uses jQuery window.width() - which is not synced with used media queries

Reported by: th23's profile th23 Owned by: davidakennedy's profile davidakennedy
Milestone: Priority: normal
Severity: normal Version: 4.2.3
Component: Bundled Theme Keywords: needs-testing
Focuses: javascript Cc:


Hi there,

while developing a child theme I came accross the point where I needed to use some JS elements depending on the screen size/ layout defined via CSS.

Unfortunately the used JS and media queries in JS in Twenty Fifteen seem not be synced due to some browser differences handling $(window).width().

For Firefox this JS excludes the scrollbar width, whereas the CSS media queries include this - resulting on no exact match.

I would propose to add a differentiation based on the cross-browser usable

window.matchMedia("(min-width: 59.6875em)").matches

For all (recent) browsers this gives the appropriate result - and for downwards compatibility the approach using width() could still be utilized, if the above does not give a result/ fails!?

Thanks for consideration!

Attachments (1)

2015@952px.jpg (83.3 KB) - added by th23 6 years ago.
Twenty Fifteen theme at 952px width - sidebar not visible

Download all attachments as: .zip

Change History (14)

#1 @SergeyBiryukov
7 years ago

  • Component changed from Themes to Bundled Theme

#2 @davidakennedy
6 years ago

Hey @th23,

Thanks for the ticket. I was playing around with this, trying to understand the issue better. The measurements appear to match across browsers and be consistent to me. But I could be misunderstanding. Could you:

  • provide some screenshots or video illustrating the problem.
  • point to exactly where in the CSS or JS the problems are. Is it all occurrences of $window.width()?

That would help me understand this better so I can possibly get a fix in place for it. Thanks again!

#3 @th23
6 years ago

Okay, will try to explain more detailed the steps to reproduce - sorry, not that easy:

Opened in Firefox at window width larger than 955px, everthing is fine.

If user has scrolled down, the sidebar gets some style defined, e.g. offset and position.

The user now resizes the window to 952px (actually whatever value between 955px and 59.6875em) the sidebar is not visible anymore :-/ Will attach an image right after...

The reason is, that the media query in CSS removes the sidebar at 59.6875em, while the JS (see below) already does not update the scroll position anymore at 955px - and both values are not necessarily the same (presumably due to the way browsers include/exclude the space of the scrollbar.

	function scroll() {
		var windowPos = $window.scrollTop();

		if ( 955 > windowWidth ) {

Does that make it clearer? If not, please donÄt hesitate to ask...

6 years ago

Twenty Fifteen theme at 952px width - sidebar not visible

#4 @karmatosed
6 years ago

  • Keywords needs-testing added

#5 @karmatosed
6 years ago

  • Milestone changed from Awaiting Review to Future Release

#6 @karmatosed
6 years ago

  • Keywords has-patch added

#7 @SergeyBiryukov
6 years ago

I don't see a patch here :)

#8 @karmatosed
6 years ago

  • Keywords has-patch removed

#9 @karmatosed
6 years ago

  • Owner set to davidakennedy
  • Status changed from new to assigned

#10 @davidakennedy
6 years ago

Hey @th23,

Thanks for the explanation here, as it does help. But I'm still having trouble reproducing the problem and seeing any issues. Sorry about that – I may be just not getting it.

I couldn't reproduce your screenshot following the steps. I do think I understand the potential issue a bit more though. :)

  • What exactly do you have in the sidebar? Should I set it to any special number of items?
  • Have you seen this in other browsers besides Firefox?

Thanks for the patience!

#11 @th23
6 years ago

Hi David,

no problem - but to be honest, I am running out of ideas on how else to describe / show...

In a nutshell, it boils down to the fact, that the CSS is using a different way of measuring the "breaking points" between layouts, than JS. And in some edge cases, these lead to different results which layout is currently shown.

There is no special thing about the number of items in the sidebar - and for me it behaves the same in the other browsers.

If this is only me seeing an issue, I don't mind closing the ticket...

Last edited 6 years ago by th23 (previous) (diff)

#12 @karmatosed
6 years ago

I think for now lets close this. If we can get steps we can then recreate and fix though.

#13 @karmatosed
6 years ago

  • Milestone Future Release deleted
  • Resolution set to worksforme
  • Status changed from assigned to closed
Note: See TracTickets for help on using tickets.