Chrome/安卓下pointer-events:none重叠元素致纯CSS轮播异常

已确认复现环境 #

• 开启移动端调试模式的桌面端Chrome
• 安装最新版Chrome的安卓Pixel 6实体设备
• iOS端全浏览器表现正常，无该异常

具体异常表现 #

当滚动区域上方叠有设置pointer-events: none的元素时，基于CSS scroll-snap实现的轮播会出现交互故障：

• 滑动触发的惯性滚动过程无法被中途打断
• 朝一个方向滑动后立刻反向拖拽，轮播会直接卡住，滚动吸附逻辑不生效
• 必须抬起手指重新触碰屏幕，才能恢复正常交互

可通过控制遮罩层的开关状态，对比有无重叠元素时的拖拽行为差异，下述最小复现代码可直接运行验证问题。

最小复现代码 #

JSX 逻辑 #

function Main() {
  return (
    <div className="App">
      <p>蓝色半透明遮罩已设置 pointer-events: none</p>
      <p>惯性滑动过程中尝试反向打断会触发异常</p>
      <section className={"testSection"}>
        <div className={"testSectionInner"}>
          <div className={"testItem"} />
          <div className={"testItem"} />
          <div className={"testItem"} />
          <div className={"testItem"} />
          <div className={"testItem"} />
        </div>
      </section>
      <div className={"testOverlay"} />
      
      <p>无重叠遮罩对照组</p>
      <p>惯性滑动过程中可正常反向打断，交互符合预期</p>
      <section className={"testSection"}>
        <div className={"testSectionInner"}>
          <div className={"testItem"} />
          <div className={"testItem"} />
          <div className={"testItem"} />
          <div className={"testItem"} />
          <div className={"testItem"} />
        </div>
      </section>
    </div>
  );
}

class App extends React.Component {  
    render() {
        return <Main />;
    }
}

ReactDOM.render(
    <App />,
    document.getElementById("root")
);

样式代码 #

.App {
  font-family: sans-serif;
  text-align: center;
}

.testSection {
  max-width: 100vw;
}

.testSectionInner {
  overflow: scroll hidden;
  padding-left: 1.25rem;
  display: flex;
  flex-flow: row nowrap;
  scroll-snap-type: x mandatory;
}

.testItem {
  scroll-snap-align: center;
  flex: 0 0 calc(81.6591%);
  background-color: red;
  height: 200px;
  margin-right: 4%;
  pointer-events: auto;
}

.testOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 300px;
  background-color: blue;
  opacity: 0.2;
  pointer-events: none;
}

入口代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

该问题已在多版本Chrome上验证复现，目前暂未找到明确的根因说明，想确认是否有其他开发者遇到过同类问题。

内容的提问来源于stack exchange，提问作者Clay Cooper