Strange horizontal scrolling in Android browser

Question

Check out the following demo on an Android device:

There is a red box that is slightly off screen. When the vertical spacer is not present, you can't drag the page around in any direction. When the spacer is present and taking up more vertical space than the window, you can drag the page down (as expected) however, now you can also drag horizontally.

This only seems to happen on Android browsers. Any clues on what's going on here? I'd like to prevent the horizontal scrolling altogether while retaining vertical scrolling.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" id="viewportMobile" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="test.css" />
    <style>
      html,body {
        overflow: hidden;
      }
      body {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: visible;
        overflow-x: hidden;
      }
      .offscreen {
        position: absolute;
        right: -20px;
        background-color: #ed0021;
        padding: 20px 20px 20px 20px;
      }
    </style>
    <script>
      var showSpacer=true;
      function toggleSpacer() {
        showSpacer = !showSpacer;
        var spacer = document.getElementById('spacer');
        spacer.style.display = showSpacer ? 'block' : 'none';
      }
    </script>

  </head>
  <body>
    <div class="toggle-button" onClick="toggleSpacer()">Toggle Spacer</div>
    <div class="offscreen"></div>
    <div id="spacer" style="width:50px; height:2000px; background-color:#444">
    </div>
  </body>
</html>

mark · Accepted Answer · 2014-10-22T14:32:16.087

0

Removing the overflow properties and changing the position to relative for the body element worked for me. It should look like this:

body {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

edit: bad copy/paste

edit 2: updated answer

edited Oct 22 '14 at 14:32

answered Oct 22 '14 at 12:55

mark

183
2
9

Sorry, I want to retain vertical scrolling but prevent horizontal scrolling. I will edit my question. – P_Dog Oct 22 '14 at 13:00
If you change the position to "relative," you get the desired effect. I've updated my answer. – mark Oct 22 '14 at 14:31
@P_Dog See these for a better explanation of positioning: https://developer.mozilla.org/en-US/docs/Web/CSS/position http://learnlayout.com/position.html http://webdesign.about.com/od/advancedcss/a/aa061307.htm – mark Oct 22 '14 at 15:18
Thanks mark, but none of these references even mention overflow let alone explain the above phenomenon. – P_Dog Oct 23 '14 at 06:44
The positioning was ultimately the issue causing this. You may have not seen it if it was relatively positioned originally. The overflow whould've worked anyway, but the `.offscreen` element would have still been cutoff. If you see this happen again, try playing with the position attribute until you get the desired effect. Good luck! – mark Oct 23 '14 at 12:49

Strange horizontal scrolling in Android browser

1 Answers1