Media queries and scrollbar width

Question

I am working on a layout that needs precise media query handling. One of my issues is the crossbrowser scrollbar width as it is different according to browsers and most (all of them?) include it in the window width.

As we can see in these 2 examples, the media queries don't act at the same window size with and without the vertical scrollbar :

1. Test without scrollbar
2. Test with scrollbar

In the first example, you can see the background color change exactly at 800/700/600px window width.
In the second examples with the scrollbar the colors change at :

• Chrome and firefox : 779/679/579px
• IE : 783/783/583px

That makes a difference of up to 21px.

Is there is a work around by ignoring the scrollbar in media queries and focus on the available width itself.
If not how do you handle this issue, do you fix a maximum width for the scollbar and include it in the media queries?

-- UPDATE --

I am searching for best practices/solution with CSS as I would like to avoid JS for this project.

Ophidian

Its look similar to other task. Try this one: [#15977031 [1]: #15977031 – Pelham

@Nividim I had seen this question but the answer doesn't fit my needs, I am looking for a css solution. – Ophidian

@web-tiki, my answer helped you? any comments? it is not accepted, let me know if something wrong, please, I will try to add additional info or explaining. – Silsby

@SharikovVladislav Your answer is interesting, links are consistent that is why I upvoted it. But I was searching for a CSS solution and best practices without JS. Maybe it wasn't clear in my question, I'll update it. – Ophidian

Answer 1

Eight years later (2023), container queries are supported in most browsers and come to the rescue!

Instead of using a media query (which, as you found, reports a window width including the scrollbar), we declare a 'containment context' on the html element

html{container-type:inline-size;}

... and then use a container query to get it's width (without the scrollbar):

@container(max-width:600px){
  body{background:gray;}
}

I've updated your example 'Test with scrollbar' using a container query approach (leaving html and javascript untouched).

Yandell

beware though - i just found out that 'position:fixed' inside the body won't work anymore when using 'container-type' on the 'html' or 'body' elements – Yandell

regarding my previous comment on the 'position:fixed' issue, there new seems to be a solution to this: oddbird.net/2023/07/05/contain-root/… – Yandell

Answer 2

Look this example: http://stowball.github.io/mqGenie/

It is working fine both in Firefox and in Chrome for me (with scrollbars).

You can download and read more about this plugin here: https://github.com/stowball/mqGenie (~2.2 kb)

One of sources: https://mcmap.net/q/510346/-issue-with-css-media-queries-scrollbar

Enjoy.

Silsby