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

[th23]

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!

[davidakennedy]

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!

[th23]

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 ) {
			return;
		}

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

[th23]

Twenty Fifteen theme at 952px width - sidebar not visible

[SergeyBiryukov]

I don't see a patch here :)

[davidakennedy]

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!

[th23]

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...

[karmatosed]

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