Nester pointer events rule issue

Different behavior in Samsung Internet vs Chrome mobile

by Matt

HTML

<div class="outer">
  <div class="inner">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</div>

<div class="key">
  Scroll disabled on left, Scroll enabled on right
</div>

CSS

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.outer {
  height: 100%;
  width: 100%;
  pointer-events: none;
  background-color: #ddd;
  display: inline-block;
  overflow-y: scroll;
}

.inner {
  height: 200%;
  overflow-y: scroll;
  background-color: #fefefe;
  display: flex;
  width: 100%;
}


.left {
  background: repeating-linear-gradient(to bottom, #ff0000, #ff0000 1rem, #aa2200 1rem, #aa2200 2rem);
  flex: 1;
}

.right {
  background: repeating-linear-gradient(to bottom, #00ff00, #00ff00 1rem, #00aa00 1rem, #00aa00 2rem);
  flex: 1;
  pointer-events: auto;
}

.key {
  position: fixed;
  bottom: 0;
  background: white;
  left: 0;
  right: 0;
  text-align: center;
}