title: Android Stock Browser Not Respecting CSS Overflow
body: <p>I'm working with a client who would like part of their interface to have a somewhat customized method of scrolling. They don't want the usual scrollbars to be visible; they want desktop / laptop users to scroll with their mouse wheel / touchpad and they want mobile users to scroll with their finger. They also want graphics of an up arrow and a down arrow to provide an alternate method of scrolling and also to make it obvious to the user that scrolling is possible (since the actual scrollbars are hidden). The client is set on this method of scrolling.</p>
  
  <p>I put together some code that works on all device / browser combinations that I've tried it on except for Android's stock browser. I have confirmed this issue with the following configurations:</p>
  
  <ul>
  <li>Android 4.1.2 (emulator)</li>
  <li>Android 4.2.2 (actual device)</li>
  <li>Android 4.2.2 (emulator)</li>
  <li>Android 4.3 (emulator)</li>
  </ul>
  
  <p>This issue is <em>not</em> present on Android 4.4.2 (emulator), though.</p>
  
  <p>In order to keep things simple for this question, I'm not including the graphics of the up and down arrows and the accompanying logic.</p>
  
  <p>Here's the code (<a href="http://jsfiddle.net/4QgxA/" rel="nofollow noreferrer">jsFiddle demo</a>):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Demo&lt;/title&gt;
      &lt;style&gt;
        #side_nav, .category {
          position: absolute;
        }
  
        #side_nav {
          -webkit-user-select: none;
        }
  
        .category {
          display: none; /* Will be shown when user clicks on an option */
          top: 0;
          left: 150px;
        }
  
        .ul_wrapper, .ul_wrapper ul {
          width: 125px;
          height: 242px;
        }
  
        .ul_wrapper {
          background: #ccc;
          border: 3px solid #000;
          border-radius: 6px;
          text-align: center;
          overflow: hidden;
        }
  
        ul {
          margin: 0;
          padding: 0;
          list-style: none;
          overflow-y: scroll;
        }
  
        li {
          padding-top: 10px;
        }
  
        li:last-child {
          padding-bottom: 10px;
        }
  
        span {
          display: inline-block;
          width: 100px;
          height: 100px;
          border: 3px solid #999;
          border-radius: 6px;
          cursor: pointer;
        }
  
        #chosen_option {
          float: left;
          margin-left: 150px;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="side_nav"&gt;
        &lt;div class="ul_wrapper"&gt;
          &lt;ul&gt;
            &lt;li&gt;
              &lt;span&gt;Option 1&lt;/span&gt;
              &lt;div class="category"&gt;
                &lt;div class="ul_wrapper"&gt;
                  &lt;ul&gt;
                    &lt;li&gt;&lt;span&gt;Option 1a&lt;/span&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;span&gt;Option 1b&lt;/span&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;span&gt;Option 1c&lt;/span&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;span&gt;Option 2&lt;/span&gt;
              &lt;div class="category"&gt;
                &lt;div class="ul_wrapper"&gt;
                  &lt;ul&gt;
                    &lt;li&gt;&lt;span&gt;Option 2a&lt;/span&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;span&gt;Option 2b&lt;/span&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;span&gt;Option 3&lt;/span&gt;
              &lt;div class="category"&gt;
                &lt;div class="ul_wrapper"&gt;
                  &lt;ul&gt;
                    &lt;li&gt;&lt;span&gt;Option 3a&lt;/span&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="chosen_option"&gt;&lt;/div&gt;
  
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
        function get_scrollbar_width() {
          var div, body, W = window.browserScrollbarWidth;
          if (W === undefined) {
            body = document.body, div = document.createElement('div');
            div.innerHTML = '&lt;div style="width: 50px; height: 50px; position: absolute; left: -100px; top: -100px; overflow: auto;"&gt;&lt;div style="width: 1px; height: 100px;"&gt;&lt;/div&gt;&lt;/div&gt;';
            div = div.firstChild;
            body.appendChild(div);
            W = window.browserScrollbarWidth = div.offsetWidth - div.clientWidth;
            body.removeChild(div);
          }
          return W;
        }
  
        var scrollbar_width = get_scrollbar_width();
  
        $('#side_nav ul').css({
          'padding-right': scrollbar_width,
          'margin-left': scrollbar_width / 2
        });
  
        $('span').on('click', function(event) {
          event.stopPropagation(); // Prevent $('html').click(); from triggering
  
          var parent_li = $(this).parent();
          var child_category = parent_li.children('.category');
  
          if (child_category.length) {
            var show_div = false;
  
            if (child_category.is(':hidden')) {
              show_div = true;
            }
  
            parent_li.siblings().find('.category:visible').fadeOut();
  
            if (show_div) {
              child_category.fadeIn();
            }
            else {
              parent_li.find('.category:visible').fadeOut();
            }
          }
          else {
            $('#chosen_option').html('You chose ' + $(this).html().toLowerCase());
            $('.category:visible').fadeOut();
          }
        });
  
        $('html').click(function() {
          $('.category:visible').fadeOut();
        });
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When you tap on any of the three options, a second list of options should appear to the right. However, it never appears on Android's stock browser unless you remove <code>overflow-y: scroll;</code> from the <code>ul</code> CSS rules, but then you can no longer scroll.</p>
  
  <p>The problem is best illustrated by replacing <code>left: 150px;</code> with <code>left: 25px;</code> in the <code>.category</code> CSS rules. When I do that, this is what it looks like in a working browser:</p>
  
  <p><img src="https://i.stack.imgur.com/Oy2YU.png" alt="Working browser"></p>
  
  <p>And this is what it looks like in Android's stock browser:</p>
  
  <p><img src="https://i.stack.imgur.com/Iy1Jk.png" alt="Android&#39;s stock browser"></p>
  
  <p>One other thing I should note is that it works in Chrome for Android.</p>
  
  <p>Is there a way that I can make this work in Android's stock browser?</p>