1

There is well known problem with media query width, which is not the same as viewport width in some browsers (WebKit browsers change the size of their CSS viewport when scrollbars are visible). I wanted to fix the problem by moving the vertical scrollbar from body or html to first wrapper div (as described on stackoverflow: https://stackoverflow.com/a/10091608/1647291).

The fix

Here's the fix with CSS:

body, html { overflow: hidden; height: 100%; }
div.wrapper { overflow: auto; height: 100%; }

It moves the vertical scrollbar from body or html to the first div inside body. Thanks to that you don't need to worry about viewport widht in media queries.

The problem

But unfortunately this great method has one bad side effect - on iPad (and possibly on some other platforms too) page can't be scrolled smoothly. After you stop touching the screen it stops scrolling imediately, there's no smooth and slow easing.

This simple solution with CSS is much simpler and better than all those methodes with testing the viewport with javascript. Some of them are described here but they are not reliable or make the site works very slow:

Is there any way to use this CSS fix and make the iPad scroll correctly?

Community
  • 1
  • 1
maginfortis
  • 121
  • 3

1 Answers1

0

It is possible you are over thinking this. We make websites all day and this is not a problem. I think that you might be worrying too much about the specific px widths. If 680px vs 693px is a big deal, you are thinking about this the wrong way. I suggest you design mobile first and make a break point whenever it gets ugly (with ems). For sites with short pages and long pages, (causing the scrollbar to appear sometimes and jump between pages when there is no scrollbar) - to just add this and call it a day. Good luck!

   html { overflow-y scroll }
nouveau
  • 1,162
  • 1
  • 8
  • 14