title: Pure CSS carousel behaves incorrectly if there is an overlapping element with pointer-events: none (Chrome and Android)
body: <p>In my testing so far Chrome with mobile inspector or actual Android phone (my Pixel 6) both are experiencing incorrect dragging behavior if there is an overlapping element that has <code>pointer-events: none</code> on it. Amazingly it's working as expected in iOS.</p>
  <p>Here's a quick code sandbox I made that shows the issue, you can toggle the overlay on and off and feel how the dragging behavior changes.
  <a href="https://codesandbox.io/s/brave-violet-bnn8xo" rel="nofollow noreferrer">https://codesandbox.io/s/brave-violet-bnn8xo</a></p>
  <p>Issue tested on Mac/Chrome and Android Pixel 6 Chrome latest.</p>
  <p>Anyone else have this experience?</p>
  <p>Edit: to be clear, the issue is that you can't interrupt a throw in progress, like immediately changing your swipe direction after you swipe one way, it gets stuck, doesn't snap, and you need to lift your finger off and reapply to get it working again.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function Main() {
    return (
      &lt;div className="App"&gt;
        &lt;p&gt;The blue transparent overlay has pointer-events: none.&lt;/p&gt;
        &lt;p&gt;Try to interrupt a throw in progress it will bug out&lt;/p&gt;
        &lt;section className={"testSection"}&gt;
          &lt;div className={"testSectionInner"}&gt;
            &lt;div className={"testItem"} /&gt;
            &lt;div className={"testItem"} /&gt;
            &lt;div className={"testItem"} /&gt;
            &lt;div className={"testItem"} /&gt;
            &lt;div className={"testItem"} /&gt;
          &lt;/div&gt;
        &lt;/section&gt;
        &lt;div className={"testOverlay"} /&gt;
        
        &lt;p&gt;Without overlay.&lt;/p&gt;
        &lt;p&gt;Try to interrupt a throw in progress it will work as expected&lt;/p&gt;
        &lt;section className={"testSection"}&gt;
          &lt;div className={"testSectionInner"}&gt;
            &lt;div className={"testItem"} /&gt;
            &lt;div className={"testItem"} /&gt;
            &lt;div className={"testItem"} /&gt;
            &lt;div className={"testItem"} /&gt;
            &lt;div className={"testItem"} /&gt;
          &lt;/div&gt;
        &lt;/section&gt;
      &lt;/div&gt;
    );
  }
  
  class App extends React.Component {  
      render() {
          return (
            &lt;Main /&gt;
          );
      }
  }
  
  // Render it
  ReactDOM.render(
      &lt;App /&gt;,
      document.getElementById("root")
  );</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"&gt;&lt;/script&gt;
  &lt;div id="root"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>