Search code examples
iosipadwebkitmobile-webkitag-grid

Scrolling in ag-grid is slow on iPad


On my iPad, the scroll experience of ag-grid is jagged and uneven. I need to keep dragging the contents in the table area instead of just flicking as for other browser content. (Scrolling performance for the same tables is generally very good on my desktop browser, so I don't believe it is a case of "heavy" table contents.)

This is not specific to my project's use of ag-grid, the experience is the same in the official "Test Drive" page.

What can I do to improve scrolling performance?


Solution

  • The following CSS rule should make the scrolling faster and smoother on the iPad, by utilizing the non-standard -webkit-overflow-scrolling CSS property. I have only been able to test it with Safari on my iPad, yet:

    .ag-body-viewport {
      // Use momentum-based scrolling on WebKit-based touch devices.
      -webkit-overflow-scrolling: touch;
    }
    

    Be aware that this rule might affect scrolling in other WebKit-based browsers, like Chrome on Android. I have not had the time to test with and without this rule on Android yet.

    Whether it is supported by other browsers is also a separate question. See, for example, How much support is there for -webkit-overflow-scrolling:touch.