WebKit Bugzilla
Attachment 360172 Details for
Bug 192344
: [css-scroll-snap] internal "scroll chaining" boundary at ancestor scroll-snap point prevents movement to next snap position even causes flickering
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Requests
|
Help
|
New Account
|
Log In
Remember
[x]
|
Forgot Password
Login:
[x]
scroll snapped outter scroller blocked by inner scroller at boundary
case.html (text/html), 1.34 KB, created by
jonjohnjohnson
on 2019-01-25 15:21:57 PST
(
hide
)
Description:
scroll snapped outter scroller blocked by inner scroller at boundary
Filename:
MIME Type:
Creator:
jonjohnjohnson
Created:
2019-01-25 15:21:57 PST
Size:
1.34 KB
patch
obsolete
><!DOCTYPE html> ><html> > <head> > <title>scroll snapped outter scroller blocked by inner scroller at boundary</title> > <meta charset="utf-8"/> > <meta name="viewport" content="width=device-width"> > <style> > .container { > overflow-y: scroll; > width: 200px; > height: 200px; > background: lightgreen; > -webkit-overflow-scrolling: touch; > scroll-snap-type: y mandatory; > } > .cell { > margin-right: 100px; > height: 100%; > scroll-snap-align: start; > display: flex; > } > .cell-inner { > overflow-y: scroll; > height: 80%; > margin: auto; > width: 100%; > } > .cell-inner::after { > content: ''; > display: block; > height: 150%; > background: repeating-linear-gradient(pink 0, pink 10px, gray 10px, gray 20px); > } > .cell:nth-child(2) .cell-inner::after { > background: repeating-linear-gradient(lightblue 0, lightblue 10px, gray 10px, gray 20px); > } > </style> > </head> > <body> > <p>scroll chaining often inhibited from inner left-side scroller to ancestor snapped scroller.</p> > <div class="container"> > <div class="cell"> > <div class="cell-inner"></div> > </div> > <div class="cell"> > <div class="cell-inner"></div> > </div> > </div> > </body> ></html> >
<!DOCTYPE html> <html> <head> <title>scroll snapped outter scroller blocked by inner scroller at boundary</title> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width"> <style> .container { overflow-y: scroll; width: 200px; height: 200px; background: lightgreen; -webkit-overflow-scrolling: touch; scroll-snap-type: y mandatory; } .cell { margin-right: 100px; height: 100%; scroll-snap-align: start; display: flex; } .cell-inner { overflow-y: scroll; height: 80%; margin: auto; width: 100%; } .cell-inner::after { content: ''; display: block; height: 150%; background: repeating-linear-gradient(pink 0, pink 10px, gray 10px, gray 20px); } .cell:nth-child(2) .cell-inner::after { background: repeating-linear-gradient(lightblue 0, lightblue 10px, gray 10px, gray 20px); } </style> </head> <body> <p>scroll chaining often inhibited from inner left-side scroller to ancestor snapped scroller.</p> <div class="container"> <div class="cell"> <div class="cell-inner"></div> </div> <div class="cell"> <div class="cell-inner"></div> </div> </div> </body> </html>
View Attachment As Raw
Actions:
View
Attachments on
bug 192344
:
356442
|
359171
| 360172