Przeglądarka zapasów Androida nie szanująca przepełnienia CSS

Question

Jan 24, 2014, 11:56 PM

Przeglądarka zapasów Androida nie szanująca przepełnienia CSS

Pracuję z klientem, który chciałby, aby część ich interfejsu miała nieco dostosowaną metodę przewijania. Nie chcą, aby zwykłe paski przewijania były widoczne; chcą, aby użytkownicy komputerów stacjonarnych / laptopów przewijali kółkiem myszy / touchpadem, a użytkownicy mobilni mogli przewijać palcem. Chcą także, aby grafika strzałki w górę i strzałki w dół zapewniała alternatywną metodę przewijania, a także aby była oczywista dla użytkownika, że przewijanie jest możliwe (ponieważ rzeczywiste paski przewijania są ukryte). Klient jest ustawiony na tę metodę przewijania.

Złożyłem kod, który działa na wszystkich kombinacjach urządzeń / przeglądarek, na których go wypróbowałem, z wyjątkiem przeglądarki zapasów Androida. Potwierdziłem ten problem w następujących konfiguracjach:

Android 4.1.2 (emulator)Android 4.2.2 (rzeczywiste urządzenie)Android 4.2.2 (emulator)Android 4.3 (emulator)

Ten problem jestnie jednak na Android 4.4.2 (emulator).

Aby zachować prostotę tego pytania, nie uwzględniam grafiki strzałek w górę iw dół oraz towarzyszącej im logiki.

Oto kod (jsFiddle demo):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
    <style>
      #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;
      }
    </style>
  </head>
  <body>
    <div id="side_nav">
      <div class="ul_wrapper">
        <ul>
          <li>
            <span>Option 1</span>
            <div class="category">
              <div class="ul_wrapper">
                <ul>
                  <li><span>Option 1a</span></li>
                  <li><span>Option 1b</span></li>
                  <li><span>Option 1c</span></li>
                </ul>
              </div>
            </div>
          </li>
          <li>
            <span>Option 2</span>
            <div class="category">
              <div class="ul_wrapper">
                <ul>
                  <li><span>Option 2a</span></li>
                  <li><span>Option 2b</span></li>
                </ul>
              </div>
            </div>
          </li>
          <li>
            <span>Option 3</span>
            <div class="category">
              <div class="ul_wrapper">
                <ul>
                  <li><span>Option 3a</span></li>
                </ul>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div id="chosen_option"></div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
      function get_scrollbar_width() {
        var div, body, W = window.browserScrollbarWidth;
        if (W === undefined) {
          body = document.body, div = document.createElement('div');
          div.innerHTML = '<div style="width: 50px; height: 50px; position: absolute; left: -100px; top: -100px; overflow: auto;"><div style="width: 1px; height: 100px;"></div></div>';
          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();
      });
    </script>
  </body>
</html>

Po dotknięciu dowolnej z trzech opcji po prawej stronie powinna pojawić się druga lista opcji. Jednak nigdy nie pojawia się w przeglądarce zasobów Android, chyba że usunieszoverflow-y: scroll; zul Reguły CSS, ale nie można już przewijać.

Problem najlepiej ilustruje wymianaleft: 150px; zleft: 25px; w.category Zasady CSS. Kiedy to robię, tak wygląda w działającej przeglądarce:

I tak wygląda przeglądarka zapasów Androida:

Inną rzeczą, którą powinienem zauważyć, jest to, że działa w Chrome na Androida.

Czy jest jakiś sposób, w jaki mogę sprawić, aby ta praca była dostępna w przeglądarce Android?