Attachment 356837 Details for Bug 183870 – iOS scroll interactions only captured by scroll containers above other scroll containers in z space

iOS scroll interactions only captured by scroll containers above other scroll containers in z space

testcase.html (text/html), 2.56 KB, created by jonjohnjohnson on 2018-12-07 14:31:11 PST

(hide)

Description:

Filename:

MIME Type:

Creator: jonjohnjohnson

Created: 2018-12-07 14:31:11 PST

Size: 2.56 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">
>  <title>testcase</title>
>  <style>
>    .hasOver {
>      font-size: 5vmin;
>      /* position: absolute; */
>      /* absolute or fixed */
>      position: fixed;
>      top: 0;
>      right: 0;
>      bottom: 0;
>      left: 0;
>    }
>    .scroller {
>      overflow-y: scroll;
>      -webkit-overflow-scrolling: touch;
>      height: 100%;
>    }
>    .hasOver::before,
>    .hasOver::after {
>      --width: 50vw;
>      content: '\00A0';
>      position: absolute;
>      z-index: 1;
>      top: 0;
>      height: 50vh;
>      font-size: 1px;
>      overflow-x: scroll;
>      overflow-y: hidden;
>      -webkit-overflow-scrolling: touch;
>    }
>    .hasOver::before {
>      left: 0;
>      right: var(--width);
>      background-color: rgba(255,0,0,.5);
>    }
>    .hasOver::after {
>      right: 0;
>      left: var(--width);
>      background-color: rgba(0,200,100,.5);
>      /* causes pseudo to become a scroll container, but only overflows by 1px, won't visualize scrollbar */
>      text-indent: calc(var(--width) + 1px);
>    }
>  </style>
></head>
><body>
>  <div class="hasOver">
>    <div class="scroller">
>      <p>On iOS, attempt to scroll vertically from the red and green blocks.</p>
>      <p>Red block allows scrolling interactions to pass through to scrolling of text.</p>
>      <p>Green block captures scrolling interactions because of it being an overflowing scroll container.</p>
>      <p>On desktop safari, both blocks capture scrolling interactions and prevent scrolling of text that is behind them.</p>
>    <p>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. 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.</p>
>    </div>
>  </div>
></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">
  <title>testcase</title>
  <style>
    .hasOver {
      font-size: 5vmin;
      /* position: absolute; */
      /* absolute or fixed */
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
    .scroller {
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      height: 100%;
    }
    .hasOver::before,
    .hasOver::after {
      --width: 50vw;
      content: '\00A0';
      position: absolute;
      z-index: 1;
      top: 0;
      height: 50vh;
      font-size: 1px;
      overflow-x: scroll;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
    }
    .hasOver::before {
      left: 0;
      right: var(--width);
      background-color: rgba(255,0,0,.5);
    }
    .hasOver::after {
      right: 0;
      left: var(--width);
      background-color: rgba(0,200,100,.5);
      /* causes pseudo to become a scroll container, but only overflows by 1px, won't visualize scrollbar */
      text-indent: calc(var(--width) + 1px);
    }
  </style>
</head>
<body>
  <div class="hasOver">
    <div class="scroller">
      <p>On iOS, attempt to scroll vertically from the red and green blocks.</p>
      <p>Red block allows scrolling interactions to pass through to scrolling of text.</p>
      <p>Green block captures scrolling interactions because of it being an overflowing scroll container.</p>
      <p>On desktop safari, both blocks capture scrolling interactions and prevent scrolling of text that is behind them.</p>
    <p>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. 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.</p>
    </div>
  </div>
</body>
</html>

Actions: View

Attachments on bug 183870: 356417 | 356435 | 356447 | 356837 | 469336