Attachment 356447 Details for Bug 183870 – Simpler testcase

Simpler testcase

nested-overflow-pointer-events.html (text/html), 1.57 KB, created by Simon Fraser (smfr) on 2018-12-03 19:16:01 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Simon Fraser (smfr)

Created: 2018-12-03 19:16:01 PST

Size: 1.57 KB

patch

obsolete

><!DOCTYPE html>
><html>
><head>
>
><meta name="description" content="scrollSnapUpTray">
>  <meta charset="utf-8">
>
>  <meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1">
><style>
>
>
>.left-container {
>    position: absolute;
>    z-index: 1;
>    top: 0;
>    right: 50%;
>    bottom: 0;
>    left: 0;
>    overflow: scroll;
>    -webkit-overflow-scrolling: touch;
>    border: 4px solid orange;
>}
>
>.app-scrollbox {
>    height: 8000px;
>}
>
>.container {
>    position: absolute;
>    z-index: 2;
>    top: 200px;
>    left: 20px;
>    right: 20px;
>    height: 400px;
>    padding: 20px;
>    box-sizing: border-box;
>    pointer-events: none;
>    background-color: silver;
>}
>
>.scroller-2 {
>    margin: 10px;
>    width: 80%;
>    height: 200px;
>    left: 20px;
>    overflow: scroll;
>    -webkit-overflow-scrolling: touch;
>    border: 2px solid green;
>}
>
>
>.icons {
>    pointer-events: all;
>    height: 300px;
>    background-image: repeating-linear-gradient(white, silver 100px);
>}
>
></style>
>
></head>
><body>
>    <div class="left-container">
>      <div class="app-scrollbox">
>      </div>
>    </div>
>
>    <div class="container">
>        I have pointer-events: none.
>        <div class="scroller-2">
>          <div class="icons">
>              <p>I have pointer-events: all</p>
>            <p>This should not be scrollable, but it's scrollable when over the orange box (bug?)</p>
>        </div>
>    </div>
>
></body>
></html>

<!DOCTYPE html>
<html>
<head>

<meta name="description" content="scrollSnapUpTray">
  <meta charset="utf-8">
<!--
Created using JS Bin
http://jsbin.com

Copyright (c) 2018 by jonjohnjohnson (http://jsbin.com/cujesed/1/edit)

Released under the MIT license: http://jsbin.mit-license.org
-->
  <meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1">
<style>


.left-container {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 50%;
    bottom: 0;
    left: 0;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    border: 4px solid orange;
}

.app-scrollbox {
    height: 8000px;
}

.container {
    position: absolute;
    z-index: 2;
    top: 200px;
    left: 20px;
    right: 20px;
    height: 400px;
    padding: 20px;
    box-sizing: border-box;
    pointer-events: none;
    background-color: silver;
}

.scroller-2 {
    margin: 10px;
    width: 80%;
    height: 200px;
    left: 20px;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    border: 2px solid green;
}


.icons {
    pointer-events: all;
    height: 300px;
    background-image: repeating-linear-gradient(white, silver 100px);
}

</style>

</head>
<body>
    <div class="left-container">
      <div class="app-scrollbox">
      </div>
    </div>

    <div class="container">
        I have pointer-events: none.
        <div class="scroller-2">
          <div class="icons">
              <p>I have pointer-events: all</p>
            <p>This should not be scrollable, but it's scrollable when over the orange box (bug?)</p>
        </div>
    </div>

</body>
</html>

Actions: View

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