Fixing scroll issues with your site on mobile

10 Mar, 2023
Xebia Background Header Wave

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.

Device toolbar toggle

Ruling out the usual suspects

Next I looked at all event handlers that were registered for one of the buggy elements and its ancestors and disabled all of them. But the problem still persisted. You can view the event listeners of an element and its ancestors by selecting an element in DevTools and selecting the event listeners tab on the right hand side. From there you can remove all event listeners to ensure that your event does not get handled by any JavaScript.

Event listeners listed

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.

Chrome setting "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.

Touch event listener none highlight examples


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.

Touch action none css style

When I removed this style rule the page immediately started responding properly to my scroll gestures and the users were a lot happier.


Get in touch with us to learn more about the subject and related solutions

Explore related posts