WebKit Bugzilla
Attachment 358487 Details for
Bug 193191
: `-webkit-overflow-scrolling: touch` causes incorrect div rendering
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Requests
|
Help
|
New Account
|
Log In
Remember
[x]
|
Forgot Password
Login:
[x]
Test case that reproduces the bug
webkit-overflow-scrolling-bug.html (text/html), 1.05 KB, created by
Alberto
on 2019-01-07 01:44:10 PST
(
hide
)
Description:
Test case that reproduces the bug
Filename:
MIME Type:
Creator:
Alberto
Created:
2019-01-07 01:44:10 PST
Size:
1.05 KB
patch
obsolete
><!DOCTYPE html> ><html> ><head> > <meta charset="UTF-8"> > <title>Bug with -webkit-overflow-scrolling: touch</title> > <style> > html { > height: 100%; > } > > body { > margin: 0; > display: flex; > height: 100%; > } > > .left { > position: absolute; > top: 0; > bottom: 0; > width: 200px; > background: red; > } > > .right { > -webkit-overflow-scrolling: touch; > box-sizing: border-box; > margin-left: 200px; > overflow: auto; > height: 100%; > width: 100%; > } > > .right p { > margin: 200px 25px; > } > > .bar { > background: blue; > color: white; > width: calc(100% + 200px); > height: 30px; > bottom: 0; > margin-left: -200px; > position: fixed; > } > </style> ></head> > ><body> > <div class="container"> > <div class="left"> > </div> > <div class="right"> > <p>a</p> > <p>a</p> > <p>a</p> > <p>a</p> > <p>a</p> > <p>a</p> > <div class="bar">This bar should be on top of the red div</div> > </div> > </div> ></body> > ></html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bug with -webkit-overflow-scrolling: touch</title> <style> html { height: 100%; } body { margin: 0; display: flex; height: 100%; } .left { position: absolute; top: 0; bottom: 0; width: 200px; background: red; } .right { -webkit-overflow-scrolling: touch; box-sizing: border-box; margin-left: 200px; overflow: auto; height: 100%; width: 100%; } .right p { margin: 200px 25px; } .bar { background: blue; color: white; width: calc(100% + 200px); height: 30px; bottom: 0; margin-left: -200px; position: fixed; } </style> </head> <body> <div class="container"> <div class="left"> </div> <div class="right"> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <div class="bar">This bar should be on top of the red div</div> </div> </div> </body> </html>
View Attachment As Raw
Actions:
View
Attachments on
bug 193191
: 358487