Wijmo FlexGrid Angular 6 slow animations in Chrome

Wijmo FlexGrid Angular 6 slow animations in Chrome

Posted by: richard.mccluskey on 23 August 2018, 5:27 am EST

• 

  richard.mccluskey

  • Post Options:
  • Link
    Copy

  Posted 23 August 2018, 5:27 am EST

  We are noticing that since we updated wijmo to latest (5.20182.500), large grids are causing slow animations in Chrome but not other browsers. Unfortunately I can’t share my project but I was curious if you have noticed this same problem? I will try to create a sample project and recreate the problem if necessary.

  I know that there were some styling changes in wijmo and I’m wondering if some animations are not optimized for Chrome. But basically the problem we are seeing is that if there is a large grid in the view, any other animations in the page are slow. Also the scrolling on the grid is pretty slow as well.

• 

  richard.mccluskey

  • Post Options:
  • Link
    Copy

  Posted 23 August 2018, 6:55 am EST

  Also, if I switch out the new wijmo css with an older version of the css the slow animations go away. Obviously this causes other style issues so it’s definitely not a good fix but I just wanted to bring up the point that I’ve narrowed it down to something with the new css.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 23 August 2018, 5:56 pm EST

  Hi,
  
  We are unable to replicate the issue at our end.
  
  The sample used for testing:-
  
  https://stackblitz.com/edit/angular-unxq5v?file=src%2Fapp%2Fapp.component.html
  
  The sample contains a grid with 100,000 rows and 9 columns along with a couple of animations. In the sample, the grid seems to have no effect on the animation and also scrolling seems to be quite smooth.
  
  Can you please have a look at the sample and let us know if we are missing something to replicate the issue?

  ~Sharad

• 

  richard.mccluskey

  • Post Options:
  • Link
    Copy

  Posted 24 August 2018, 4:06 am EST

  Thanks for looking into this. I also had trouble replicating the issue. One difference about your sample is that the animations don’t cause the grid to resize but ours do. I don’t have a lot of time now to create a sample that recreates the problem but I’ll try to get to that eventually.

  One interesting thing we found though was that the problem was fixed by overwriting the border styles in the .wj-cell css class. The original style is using an rgba() function and we changed it to use hex values. Our theory is that our animations are causing the grids to repaint and this calculation is happening enough that it actually causes a performance issue. Changing it to use hardcoded values is less expensive and brought everything back to being smooth. This is what we changed it to:

  
  .wj-cell {
    border-right: 1px solid #E5E5E5;
    border-bottom: 1px solid #E5E5E5;
   }
  
  

  Again, I know that without reproducing the problem it’s hard for you to look into it but I just wanted to update you about what we found in the mean time.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 26 August 2018, 5:03 pm EST

  Hi,
  
  Thanks for taking the time to look for possible problem causes however we are still unable to replicate the issue at our end.
  
  We added a resize animation for flexgrid, but still, it seems to have to have no effect on the other animation or scroll performance.
  
  Link to updated sample:- https://stackblitz.com/edit/angular-ad6f96?file=src%2Fapp%2Fapp.component.css

  Could you please have a look at it and let us know if you could replicate it at your end? Also can you please tell us about your OS, browser version so that we may test it on the similar environment.
  
  We have also created a case for the issue with internal tracking id 340720 and will wait for your sample before escalating it any further.

  ~Sharad