FlexGrid scrolling-performance in mobile devices

FlexGrid scrolling-performance in mobile devices

Posted by: ja on 6 April 2020, 7:25 pm EST

• 

  ja

  • Post Options:
  • Link
    Copy

  Posted 6 April 2020, 7:25 pm EST

  Hi!

  We’re currently evaluating the FlexGrid (along with other grid-vendors) for a large project. We have previously used this grid, and appreciate a lot of the features.

  But, when testing the FlexGrid in mobile devices, we experience a lot of flickering and poor scrolling perfomance. Even when testing your own demos on an iPhone 11 and an iPad Air, the flickering is just horrible.

  Are we missing something? Is this really how the grid performs on touch-devices?

  Hope this isn’t the case, because the grid performs really good on desktop devices.

  Best regards
  
  Jon

• 

  chris.bannon

  • Post Options:
  • Link
    Copy

  Posted 7 April 2020, 5:50 am EST

  Hey Jon, thanks for pointing this out. You are correct, this is very bad performance. We see bad flickering in iOS13. We have fixed the issue and are making a new build now.

  In the meantime, you can add this CSS to your application as a temporary patch.

  
  .wj-flexgrid [wj-part=root] {
    -webkit-overflow-scrolling: touch;
  }
  
  

  Sorry for the trouble and thanks again!

• 

  ja

  • Post Options:
  • Link
    Copy

  Posted 7 April 2020, 7:50 pm EST

  Hi Chris!

  Thanks, this did improve scrolling performance a great deal.

  I still see some performance issues with large tables (and when using frozen columns). More specific, the frozen column(s) are lagging behind when scrolling vertically. So it takes a second or two to make the frozen columns align with the non-frozen columns.

  The issue seems to increase when the total number of visible cells increase (which obviously makes sense). For example, when the grid takes up most of the screen on an iPad, the scrolling (with frozen-columns included) seems flaky, but when I run the demos on your site, where the grid is limited to showing only a handfull of cells, the scrolling is ok.

  However, when displayed on a mobile phone (iPhone 11 in may case), the scrolling is acceptable, and feels pretty smooth.

  Are there any other tricks to increase scrolling even further?

  Thanks!

  Regards
  
  Jon

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 12 April 2020, 3:57 pm EST

  Hi Jon,

  Sorry for the delayed response. We have forwarded this issue to the dev team with internal tracking id 430915. We will update you as soon as we will hear from them.

  In the meantime, set the cloneFrozenCells property of the FlexGrid to true and try scrolling again and let us know if it improves the scrolling. Also, it would be really helpful if you can provide a sample replicating the issue.

  Regards,
  
  Ashwin

• 

  ja

  • Post Options:
  • Link
    Copy

  Posted 13 April 2020, 6:50 pm EST

  Hello!

  Thanks for your reply.
  
  Unfortunately, this didn’t seem to have any noticably impact on scrolling on tablet.

  I will try to extract an example, though it might take quite an effort to seperate the grid from the rest. I’ll see what I can do…

  Thanks!

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 21 December 2020, 10:50 pm EST

  Hi Jon,

  Regarding #430915, Here’s a fiddle that shows a possible solution:

  https://jsfiddle.net/Wijmo5/ysneuzqt/

  The fiddle uses this function to replace the native/inertial touch-scrolling with some custom code that updates the grid’s scrollPosition property:

  function disableInertialScrolling(grid) {
      let root = grid._root,
          sp = null,
          start = null;
      root.addEventListener('touchstart', e => {
          sp = grid.scrollPosition;
          start = e;
      });
      root.addEventListener('touchmove', e => {
          grid.scrollPosition = new wijmo.Point(
              sp.x + (e.pageX - start.pageX),
              sp.y + (e.pageY - start.pageY),
          );
          e.preventDefault();
          e.stopPropagation();
      });
  }
  

  ~regards