WebKit Bugzilla
Attachment 356442 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]
Exhibits scroll boundary breaking behavior between inner scrollable element and ancestor snapport
testcase.html (text/html), 11.94 KB, created by
jonjohnjohnson
on 2018-12-03 17:59:01 PST
(
hide
)
Description:
Exhibits scroll boundary breaking behavior between inner scrollable element and ancestor snapport
Filename:
MIME Type:
Creator:
jonjohnjohnson
Created:
2018-12-03 17:59:01 PST
Size:
11.94 KB
patch
obsolete
><!DOCTYPE html> ><html> ><head> > <meta name="description" content="testcase" /> > <meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1.0, user-scalable=no"> > <meta name="apple-mobile-web-app-capable" content="yes"> > <title>testcase</title> > <style> > :root { > --tray-width: calc(100vw - 10px); > --tray-width: calc(100vw); > --tray-height: 4.5rem; > --tray-cell: calc((var(--tray-width) / var(--tray-count)) - ((1 + ((1 + var(--tray-peak)) / var(--tray-count))) * var(--tray-gap))); > --tray-height: calc(var(--tray-cell) * 3 / 5); > --tray-count: 6; > /* gap is part rem and part half of a 20th of tray width split across the count*/ > --tray-gap: calc(.375rem + (var(--tray-width) / (40 * var(--tray-count)))); > --tray-space: calc(var(--tray-height) + (2 * var(--tray-gap))); > /* peak is int * gap */ > --tray-peak: 2; > --gut: 50px; > } > @media screen and (orientation:portrait) { > :root { > --tray-count: 4; > --tray-height: var(--tray-cell); > } > } > > html { > -webkit-text-size-adjust: none; > } > html, body { > display: flex; > flex-flow: column; > height: 100%; > overflow: hidden; > } > .root { > position: fixed; > top: 0; > /* right: 0; */ > width: var(--tray-width); > bottom: 0; > left: 0; > background-color: #fbd; > } > .root-inner { > height: 100%; > width: calc(100% + var(--gut)); > > overflow-y: scroll; > -webkit-overflow-scrolling: touch; > scroll-snap-type: y mandatory; > overscroll-behavior-y: contain; > scroll-behavior: smooth; > } > .main { > position: -webkit-sticky; > position: sticky; > top: 0; > height: 100%; > width: calc(100% - var(--gut)); > bottom: 0; > overflow: hidden; > scroll-snap-align: start; > } > .main-inner { > height: calc(100% + var(--gut)); > display: flex; > flex-flow: row nowrap; > overflow-x: scroll; > scroll-snap-type: x mandatory; > scroll-behavior: smooth; > > /* uncomment line 78 to see it working correct in iOS */ > /* without this line, it exploits the opposing axis scroll chaining bug in iOS */ > /* overflow: hidden; */ > } > .main-page { > height: calc(100% - var(--gut)); > width: 100%; > flex: 0 0 auto; > scroll-snap-align: start; > } > .view { > overflow-y: scroll; > overscroll-behavior-y: contain; > height: 100%; > width: 100%; > flex: 0 0 auto; > } > .view-inner { > min-height: 100%; > padding-bottom: var(--tray-space); > } > .tray { > margin-top: calc(-2 * var(--tray-gap)); > width: calc(100% - var(--gut)); > scroll-snap-align: end; > } > .tray-inner { > /* margin-top: calc(var(--tray-height) + var(--tray-space)); */ > scroll-snap-align: start; > scroll-snap-margin: var(--tray-space); > scroll-margin: var(--tray-space); > pointer-events: auto; > overflow: hidden; > /* padding-bottom: var(--gut); */ > background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) calc(3 * var(--tray-gap)), rgba(0,0,0,.5)); > position: relative; > } > .tray-inner::before { > content: ''; > position: absolute; > z-index: 1; > top: 0; > left: 0; > right: 0; > height: calc(2 * var(--tray-gap)); > } > @supports (-webkit-overflow-scrolling: touch) { > .tray-inner::before { > /* funny ios safari hack to make before a scroller with scrollbox *barely larger than scrollport so pointers get grabbed before passing down to horizontal scroller of panel while tray is "closed" */ > content: '\00A0'; > font-size: 1px; > overflow-x: scroll; > overflow-y: hidden; > text-indent: calc(var(--tray-width) + 1px); > } > } > .panels { > height: calc(100% + var(--gut)); > overflow-x: scroll; > overflow-y: hidden; > padding-bottom: var(--gut); > margin-bottom: calc(-1 * var(--gut)); > > scroll-snap-type: x mandatory; > scroll-padding-left: calc(var(--tray-gap) - 2px); > scroll-padding-left: calc(var(--tray-gap) * (1 + (var(--tray-peak) / 2))); > } > .panels-inner { > height: calc(100% - var(--gut)); > padding: var(--tray-gap) 0; > width: -webkit-max-content; > width: max-content; > display: flex; > flex-flow: row nowrap; > } > .panels-item { > margin-left: var(--tray-gap); > width: var(--tray-cell); > flex: 0 0 auto; > height: var(--tray-height); > border-radius: calc(var(--tray-gap) / 2); > background-color: #fff; > box-shadow: 0 2px 3px rgba(0,0,0,.5); > > scroll-snap-align: start; > } > .panels-inner::after { > content: ''; > width: var(--tray-gap); > flex: 0 0 auto; > } > </style> ></head> ><body> > <div class="root"> > <div class="root-inner"> > <div class="main"> > <div class="main-inner"> > <div class="main-page"> > <div class="view"> > <div class="view-inner"> > <ul> > <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> > <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> > <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> > </ul> > </div> > </div> > </div> > <div class="main-page"> > <div class="view"> > <div class="view-inner"> > <ul> > <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> > <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> > <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> > </ul> > </div> > </div> > </div> > <div class="main-page"> > <div class="view"> > <div class="view-inner"> > <ul> > <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> > <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> > <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> > </ul> > </div> > </div> > </div> > <div class="main-page"> > <div class="view"> > <div class="view-inner"> > <ul> > <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> > <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> > <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> > </ul> > </div> > </div> > </div> > </div> > </div> > <div class="tray"> > <div class="tray-inner"> > <div class="panels"> > <div class="panels-inner"> > <div class="panels-item"></div> > <div class="panels-item"></div> > <div class="panels-item"></div> > <div class="panels-item"></div> > <div class="panels-item"></div> > <div class="panels-item"></div> > <div class="panels-item"></div> > <div class="panels-item"></div> > <div class="panels-item"></div> > <div class="panels-item"></div> > <div class="panels-item"></div> > </div> > </div> > </div> > </div> > </div> > </div> > <script> > > </script> ></body> ></html>
<!DOCTYPE html> <html> <head> <meta name="description" content="testcase" /> <meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1.0, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <title>testcase</title> <style> :root { --tray-width: calc(100vw - 10px); --tray-width: calc(100vw); --tray-height: 4.5rem; --tray-cell: calc((var(--tray-width) / var(--tray-count)) - ((1 + ((1 + var(--tray-peak)) / var(--tray-count))) * var(--tray-gap))); --tray-height: calc(var(--tray-cell) * 3 / 5); --tray-count: 6; /* gap is part rem and part half of a 20th of tray width split across the count*/ --tray-gap: calc(.375rem + (var(--tray-width) / (40 * var(--tray-count)))); --tray-space: calc(var(--tray-height) + (2 * var(--tray-gap))); /* peak is int * gap */ --tray-peak: 2; --gut: 50px; } @media screen and (orientation:portrait) { :root { --tray-count: 4; --tray-height: var(--tray-cell); } } html { -webkit-text-size-adjust: none; } html, body { display: flex; flex-flow: column; height: 100%; overflow: hidden; } .root { position: fixed; top: 0; /* right: 0; */ width: var(--tray-width); bottom: 0; left: 0; background-color: #fbd; } .root-inner { height: 100%; width: calc(100% + var(--gut)); overflow-y: scroll; -webkit-overflow-scrolling: touch; scroll-snap-type: y mandatory; overscroll-behavior-y: contain; scroll-behavior: smooth; } .main { position: -webkit-sticky; position: sticky; top: 0; height: 100%; width: calc(100% - var(--gut)); bottom: 0; overflow: hidden; scroll-snap-align: start; } .main-inner { height: calc(100% + var(--gut)); display: flex; flex-flow: row nowrap; overflow-x: scroll; scroll-snap-type: x mandatory; scroll-behavior: smooth; /* uncomment line 78 to see it working correct in iOS */ /* without this line, it exploits the opposing axis scroll chaining bug in iOS */ /* overflow: hidden; */ } .main-page { height: calc(100% - var(--gut)); width: 100%; flex: 0 0 auto; scroll-snap-align: start; } .view { overflow-y: scroll; overscroll-behavior-y: contain; height: 100%; width: 100%; flex: 0 0 auto; } .view-inner { min-height: 100%; padding-bottom: var(--tray-space); } .tray { margin-top: calc(-2 * var(--tray-gap)); width: calc(100% - var(--gut)); scroll-snap-align: end; } .tray-inner { /* margin-top: calc(var(--tray-height) + var(--tray-space)); */ scroll-snap-align: start; scroll-snap-margin: var(--tray-space); scroll-margin: var(--tray-space); pointer-events: auto; overflow: hidden; /* padding-bottom: var(--gut); */ background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) calc(3 * var(--tray-gap)), rgba(0,0,0,.5)); position: relative; } .tray-inner::before { content: ''; position: absolute; z-index: 1; top: 0; left: 0; right: 0; height: calc(2 * var(--tray-gap)); } @supports (-webkit-overflow-scrolling: touch) { .tray-inner::before { /* funny ios safari hack to make before a scroller with scrollbox *barely larger than scrollport so pointers get grabbed before passing down to horizontal scroller of panel while tray is "closed" */ content: '\00A0'; font-size: 1px; overflow-x: scroll; overflow-y: hidden; text-indent: calc(var(--tray-width) + 1px); } } .panels { height: calc(100% + var(--gut)); overflow-x: scroll; overflow-y: hidden; padding-bottom: var(--gut); margin-bottom: calc(-1 * var(--gut)); scroll-snap-type: x mandatory; scroll-padding-left: calc(var(--tray-gap) - 2px); scroll-padding-left: calc(var(--tray-gap) * (1 + (var(--tray-peak) / 2))); } .panels-inner { height: calc(100% - var(--gut)); padding: var(--tray-gap) 0; width: -webkit-max-content; width: max-content; display: flex; flex-flow: row nowrap; } .panels-item { margin-left: var(--tray-gap); width: var(--tray-cell); flex: 0 0 auto; height: var(--tray-height); border-radius: calc(var(--tray-gap) / 2); background-color: #fff; box-shadow: 0 2px 3px rgba(0,0,0,.5); scroll-snap-align: start; } .panels-inner::after { content: ''; width: var(--tray-gap); flex: 0 0 auto; } </style> </head> <body> <div class="root"> <div class="root-inner"> <div class="main"> <div class="main-inner"> <div class="main-page"> <div class="view"> <div class="view-inner"> <ul> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> </ul> </div> </div> </div> <div class="main-page"> <div class="view"> <div class="view-inner"> <ul> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> </ul> </div> </div> </div> <div class="main-page"> <div class="view"> <div class="view-inner"> <ul> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> </ul> </div> </div> </div> <div class="main-page"> <div class="view"> <div class="view-inner"> <ul> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> </ul> </div> </div> </div> </div> </div> <div class="tray"> <div class="tray-inner"> <div class="panels"> <div class="panels-inner"> <div class="panels-item"></div> <div class="panels-item"></div> <div class="panels-item"></div> <div class="panels-item"></div> <div class="panels-item"></div> <div class="panels-item"></div> <div class="panels-item"></div> <div class="panels-item"></div> <div class="panels-item"></div> <div class="panels-item"></div> <div class="panels-item"></div> </div> </div> </div> </div> </div> </div> <script> </script> </body> </html>
View Attachment As Raw
Actions:
View
Attachments on
bug 192344
: 356442 |
359171
|
360172