WebKit Bugzilla
Attachment 361714 Details for
Bug 177646
: Scroll containers with "-webkit-overflow-scrolling: touch" don't always show scrollbars on scroll
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Requests
|
Help
|
New Account
|
Log In
Remember
[x]
|
Forgot Password
Login:
[x]
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:
Repro case: rapid changes to scrollable height
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>
View Attachment As Raw
Actions:
View
Attachments on
bug 177646
: 361714