0

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 pointer-events: none on it. Amazingly it's working as expected in iOS.

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. https://codesandbox.io/s/brave-violet-bnn8xo

Issue tested on Mac/Chrome and Android Pixel 6 Chrome latest.

Anyone else have this experience?

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.

function Main() {
  return (
    <div className="App">
      <p>The blue transparent overlay has pointer-events: none.</p>
      <p>Try to interrupt a throw in progress it will bug out</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>Without overlay.</p>
      <p>Try to interrupt a throw in progress it will work as expected</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 />
        );
    }
}

// Render it
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>
Clay Cooper
  • 101
  • 1
  • 5
  • Please share your code as a [stack snippet](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) inside your question. That way, your code will always remain accessible to others reading your question on Stack Overflow. – Camelopardalus Jul 02 '22 at 06:08
  • Finally I found someone with the exact same problem I am experiencing! I need my overlay to do smooth opacity transitions for a fixed menu hovering over my snap-scroll. I spent days trying to fix this issue and I still got nowhere. :( – fy data Oct 26 '22 at 13:38

0 Answers0