Attachment 358487 Details for Bug 193191 – Test case that reproduces the bug

Test case that reproduces the bug

webkit-overflow-scrolling-bug.html (text/html), 1.05 KB, created by Alberto on 2019-01-07 01:44:10 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Alberto

Created: 2019-01-07 01:44:10 PST

Size: 1.05 KB

patch

obsolete

><!DOCTYPE html>
><html>
><head>
>  <meta charset="UTF-8">
>  <title>Bug with -webkit-overflow-scrolling: touch</title>
>  <style>
>    html {
>      height: 100%;
>    }
>
>    body {
>      margin: 0;
>      display: flex;
>      height: 100%;
>    }
>
>    .left {
>      position: absolute;
>      top: 0;
>      bottom: 0;
>      width: 200px;
>      background: red;
>    }
>
>    .right {
>      -webkit-overflow-scrolling: touch;
>      box-sizing: border-box;
>      margin-left: 200px;
>      overflow: auto;
>      height: 100%;
>      width: 100%;
>    }
>
>    .right p {
>      margin: 200px 25px;
>    }
>
>    .bar {
>      background: blue;
>      color: white;
>      width: calc(100% + 200px);
>      height: 30px;
>      bottom: 0;
>      margin-left: -200px;
>      position: fixed;
>    }
>  </style>
></head>
>
><body>
>  <div class="container">
>    <div class="left">
>    </div>
>    <div class="right">
>      <p>a</p>
>      <p>a</p>
>      <p>a</p>
>      <p>a</p>
>      <p>a</p>
>      <p>a</p>
>      <div class="bar">This bar should be on top of the red div</div>
>    </div>
>  </div>
></body>
>
></html>

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Bug with -webkit-overflow-scrolling: touch</title>
  <style>
    html {
      height: 100%;
    }

    body {
      margin: 0;
      display: flex;
      height: 100%;
    }

    .left {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 200px;
      background: red;
    }

    .right {
      -webkit-overflow-scrolling: touch;
      box-sizing: border-box;
      margin-left: 200px;
      overflow: auto;
      height: 100%;
      width: 100%;
    }

    .right p {
      margin: 200px 25px;
    }

    .bar {
      background: blue;
      color: white;
      width: calc(100% + 200px);
      height: 30px;
      bottom: 0;
      margin-left: -200px;
      position: fixed;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="left">
    </div>
    <div class="right">
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <div class="bar">This bar should be on top of the red div</div>
    </div>
  </div>
</body>

</html>

Actions: View

Attachments on bug 193191: 358487