Attachment 361714 Details for Bug 177646 – Repro case: rapid changes to scrollable height

Repro case: rapid changes to scrollable height

noScrollbar.html (text/html), 1.51 KB, created by tahoon on 2019-02-11 14:51:45 PST

(hide)

Description:

Filename:

MIME Type:

Creator: tahoon

Created: 2019-02-11 14:51:45 PST

Size: 1.51 KB

patch

obsolete

><!DOCTYPE html>
><html>
>  <head>
>    <title>Bug 177646: Scroll containers with "-webkit-overflow-scrolling: touch" don't always show scrollbars on scroll</title>
>  </head>
>  <meta name="viewport" content="width=device-width">
>  <style>
>    #container {
>      width: 150px;
>      height: 200px;
>      border: 1px solid black;
>      margin: 10px 0;
>      overflow: auto;
>      -webkit-overflow-scrolling: touch;
>    }
>
>    .item {
>      height: 80px;
>      width: 100px;
>      background-color: green;
>      outline: 1px solid black;
>    }
>  </style>
></head>
><body>
>  <div>
>    <button id='add'>Add item</button>
>    <button id='clear'>Clear all</button>
>    <label><input id='autoadd' type='checkbox' />Add items automatically</label>
>  </div>
>  <div id='container'>
>  </div>
>
>  <script>
>    var container = document.getElementById('container');
>
>    var addItem = function() {
>      var item = document.createElement('div');
>      item.classList.add('item');
>      container.appendChild(item);
>    };
>
>    document.getElementById('add').addEventListener('click', addItem);
>    document.getElementById('clear').addEventListener('click', function() {
>      container.innerHTML = '';
>    });
>
>    var checkbox = document.getElementById('autoadd');
>    var autoAddId = 0;
>
>    checkbox.addEventListener('change', function() {
>      window.clearInterval(autoAddId);
>      if (checkbox.checked) {
>        autoAddId = window.setInterval(addItem, 100);
>      }
>    });
>  </script>
></body>
></html>

<!DOCTYPE html>
<html>
  <head>
    <title>Bug 177646: Scroll containers with "-webkit-overflow-scrolling: touch" don't always show scrollbars on scroll</title>
  </head>
  <meta name="viewport" content="width=device-width">
  <style>
    #container {
      width: 150px;
      height: 200px;
      border: 1px solid black;
      margin: 10px 0;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }

    .item {
      height: 80px;
      width: 100px;
      background-color: green;
      outline: 1px solid black;
    }
  </style>
</head>
<body>
  <div>
    <button id='add'>Add item</button>
    <button id='clear'>Clear all</button>
    <label><input id='autoadd' type='checkbox' />Add items automatically</label>
  </div>
  <div id='container'>
  </div>

  <script>
    var container = document.getElementById('container');

    var addItem = function() {
      var item = document.createElement('div');
      item.classList.add('item');
      container.appendChild(item);
    };

    document.getElementById('add').addEventListener('click', addItem);
    document.getElementById('clear').addEventListener('click', function() {
      container.innerHTML = '';
    });

    var checkbox = document.getElementById('autoadd');
    var autoAddId = 0;

    checkbox.addEventListener('change', function() {
      window.clearInterval(autoAddId);
      if (checkbox.checked) {
        autoAddId = window.setInterval(addItem, 100);
      }
    });
  </script>
</body>
</html>

Actions: View

Attachments on bug 177646: 361714