Attachment 356435 Details for Bug 183870 – Another test case, that uses :checked pseudo class to show the hack that fixes the in the same scroller.

Another test case, that uses :checked pseudo class to show the hack that fixes the in the same scroller.

testcase.html (text/html), 2.11 KB, created by jonjohnjohnson on 2018-12-03 16:44:44 PST

(hide)

Description:

Filename:

MIME Type:

Creator: jonjohnjohnson

Created: 2018-12-03 16:44:44 PST

Size: 2.11 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>
>    body {
>      height: 200vh;
>    }
>    .fixed-scroller-y {
>      position: fixed;
>      top: 0;
>      width: 30vw;
>      left: 0;
>      height: 50vh;
>      pointer-events: none;
>      background-color: red;
>      overflow-y: scroll;
>      overflow-x: hidden;
>      -webkit-overflow-scrolling: touch;
>      outline: 2px solid blue;
>    }
>    .tray-horz {
>      margin-top: 35vh;
>      right: 0;
>      left: 50%;
>    }
>    .content {
>      pointer-events: auto;
>      margin-top: 35vh;
>      height: 50vh;
>      overflow: hidden;
>      background-image: repeating-linear-gradient(to bottom right, black 0rem, black 1rem, white 1rem, white 2rem);
>    }
>    .content-overflow-x {
>      height: 100%;
>      width: 100vw;
>      margin-left: 2rem;
>      background-image: repeating-linear-gradient(to right, black 0rem, black 1rem, white 1rem, white 2rem);
>      opacity: .8;
>    }
>    .offleft {
>      position: fixed;
>      left: calc(2rem + 30vw);
>      top: 0;
>    }
>    .text {
>      top: 1.5rem;
>    }
>    input {
>      transform: scale(2);
>      transform-origin: left top;
>    }
>    :checked ~ * .content {
>      overflow-x: scroll;
>    }
>  </style>
></head>
><body>
>  
>  <input class="offleft" type="checkbox" value="allow scrolling">
>  <div class="offleft text">
>    <p>Try scrolling vertically above the striped content. It won't scroll its scroll container with red background</p>
>    <p>Check the checkbox to match this selector, which is a hack to remedy the buggy behavior. Inspect the document to see further.</p>
>    <pre>:checked ~ * .content {
>  overflow-x: scroll;
>}</pre>
>    <p>Once that selector matches, you can try scrolling the striped background again, and now it will scroll its scroll container.</p>
>  </div>
>  
>  <div class="fixed-scroller-y">
>    <div class="content">
>      <div class="content-overflow-x"></div>
>    </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">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <title>testcase</title>
  <style>
    body {
      height: 200vh;
    }
    .fixed-scroller-y {
      position: fixed;
      top: 0;
      width: 30vw;
      left: 0;
      height: 50vh;
      pointer-events: none;
      background-color: red;
      overflow-y: scroll;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      outline: 2px solid blue;
    }
    .tray-horz {
      margin-top: 35vh;
      right: 0;
      left: 50%;
    }
    .content {
      pointer-events: auto;
      margin-top: 35vh;
      height: 50vh;
      overflow: hidden;
      background-image: repeating-linear-gradient(to bottom right, black 0rem, black 1rem, white 1rem, white 2rem);
    }
    .content-overflow-x {
      height: 100%;
      width: 100vw;
      margin-left: 2rem;
      background-image: repeating-linear-gradient(to right, black 0rem, black 1rem, white 1rem, white 2rem);
      opacity: .8;
    }
    .offleft {
      position: fixed;
      left: calc(2rem + 30vw);
      top: 0;
    }
    .text {
      top: 1.5rem;
    }
    input {
      transform: scale(2);
      transform-origin: left top;
    }
    :checked ~ * .content {
      overflow-x: scroll;
    }
  </style>
</head>
<body>
  
  <input class="offleft" type="checkbox" value="allow scrolling">
  <div class="offleft text">
    <p>Try scrolling vertically above the striped content. It won't scroll its scroll container with red background</p>
    <p>Check the checkbox to match this selector, which is a hack to remedy the buggy behavior. Inspect the document to see further.</p>
    <pre>:checked ~ * .content {
  overflow-x: scroll;
}</pre>
    <p>Once that selector matches, you can try scrolling the striped background again, and now it will scroll its scroll container.</p>
  </div>
  
  <div class="fixed-scroller-y">
    <div class="content">
      <div class="content-overflow-x"></div>
    </div>
  </div>

</body>
</html>

Actions: View

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