Responsive breakpoint does not trigger at the exact value when scrollbar is displayed

actarram

Hello!

I noticed that when my browser's scrollbar is displayed, the breakpoints are not triggered at the exact widths defined. For instance, in Google Chrome, if I have a breakpoint with the width 1200, the breakpoint will actually trigger when my window's size is 1217px. By looking at the source code, I noticed that in the "_resize" function, you compare the breakpoints' widths with the window's width defined in the following way:var width = $(window).width(); which does not include the scrollbar in Google Chrome (and perhaps other browsers). Meanwhile, window.innerWidth returns a consistent cross-browser result. Would you consider using that property instead in future versions or add the ability to include or exclude the scrollbar? Or can I already achieve that in a way that I'm not aware of?

Thank you!

colin

Hi @actarram ,

We're happy to take a look, but it would help, as per the forum rules, if you could link to a running test case showing the issue so we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

actarram

Hey @colin ,

Of course, I'm sorry I didn't do it in the first place.

https://plnkr.co/edit/GFwgJ9hoX0Ztev01qDbG

So just to be clear, breakpoint triggers on window width that excludes the scrollbar, while I'm looking for a way to trigger on window width that includes the scrollbar.

allan

Thanks for the suggestion! I completely agree. I've committed a change to do that.

I've stuck with jQuery for the moment to ensure browser compatibility.

Allan