I had a wicked issue yesterday. We got a user report that scrolling on certain pages was really buggy. First step was to narrow down what this “really buggy” part was. Turned that when you initiated a scroll gesture from certain parts of the UI it simply wouldn’t respond. I found out that I could reproduce it in Chrome on my laptop with device simulation mode enabled, which was already a big relief.
Open Chrome’s DevTools and click the following icon to toggle the device toolbar and jump into device mode. Chrome will simulate a mobile device and will start sending touch gestures to your website so you can test how your page will respond on a mobile browser.
Ruling out the usual suspects
Zooming in on styles
Then I turned to the styles inspector trying to find an element or overlay that had pointer-events: none but I couldn’t find anything with that property. This is one one those typical CSS properties that causes your page not to respond to any kind of pointer events.
After that I went looking in Devtools for something that could help me debug this scroll issue. Turns out DevTools has a checkbox for highlighting
Scrolling performance issues.
When I turned it on the whole page immediately lit up like a christmas tree with warnings that a lot of elements had Touch event listener: NONE.
Via an isolated element that had that warning overlayed on it I found out that one of my predecessors decided to fix a weird IE10 behaviour on mobile (?) by adding touch-action: none !important; on all interactive elements.
When I removed this style rule the page immediately started responding properly to my scroll gestures and the users were a lot happier.