100vw problem when setting scrollbar always visible on Mac and how to deal with it

If you have scrollbars set to always visible on a Mac, using 100vw ( 100% viewport width) as a CSS property may result in unexpected scrollbars. This is because 100vw represents the full width of the viewport, which includes the width of the scrollbars.

The solution for now is to set overflow: hidden; on the element where the scrollbar will appear. However, this will hide the scrollbar itself, so we recommend using 100% if possible. This 100% represents the width of the viewport excluding the width of the scrollbars, thus avoiding the problem described above.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top