Attachment 360172 Details for Bug 192344 – scroll snapped outter scroller blocked by inner scroller at boundary

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:

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>

Actions: View

Attachments on bug 192344: 356442 | 359171 | 360172