Navegador de ações do Android que não respeita o estouro de CSS

Question

Jan 24, 2014, 11:56 PM

Navegador de ações do Android que não respeita o estouro de CSS

Estou trabalhando com um cliente que gostaria que parte de sua interface tivesse um método um pouco personalizado de rolagem. Eles não querem que as barras de rolagem usuais sejam visíveis; eles querem que os usuários de desktop / laptop rolem com a roda do mouse / touchpad e desejam que os usuários móveis rolem com o dedo. Eles também querem gráficos de uma seta para cima e uma seta para baixo para fornecer um método alternativo de rolagem e também para tornar óbvio para o usuário que a rolagem é possível (uma vez que as barras de rolagem reais estão ocultas). O cliente está definido neste método de rolagem.

Criei um código que funciona em todas as combinações de dispositivos / navegadores em que eu experimentei, exceto no navegador de ações do Android. Confirmei esse problema com as seguintes configurações:

Android 4.1.2 (emulador)Android 4.2.2 (dispositivo real)Android 4.2.2 (emulador)Android 4.3 (emulador)

Esta questão énão presente no Android 4.4.2 (emulador), no entanto.

Para simplificar as coisas para esta pergunta, não incluo os gráficos das setas para cima e para baixo e a lógica que o acompanha.

Aqui está o código (Demonstração do jsFiddle):

<!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>

Quando você toca em qualquer uma das três opções, uma segunda lista de opções deve aparecer à direita. No entanto, ele nunca aparece no navegador de ações do Android, a menos que você removaoverflow-y: scroll; deul Regras CSS, mas você não pode mais rolar.

O problema é melhor ilustrado substituindo-oleft: 150px; comleft: 25px; no.category Regras CSS. Quando faço isso, é assim que parece em um navegador de trabalho:

E é assim que parece no navegador de ações do Android:

Outra coisa que devo observar é que ele funciona no Chrome para Android.

Existe uma maneira de fazer isso funcionar no navegador de ações do Android?