Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

v4.2.2 Style recalculation in a loop cause grid blinking #6561

Closed
falsyvalues opened this issue Feb 2, 2018 · 5 comments · Fixed by #6565
Closed

v4.2.2 Style recalculation in a loop cause grid blinking #6561

falsyvalues opened this issue Feb 2, 2018 · 5 comments · Fixed by #6565

Comments

@falsyvalues
Copy link
Contributor

ui-grid in version 4.2.2 is doing some style recalculation (which does not change anything) in a loop which cause blinking whole grid and forcing reflow which is a perf bottleneck.

reflow

@mportuga
Copy link
Member

mportuga commented Feb 2, 2018

Thanks for the note @falsyvalues, Do you have any guesses as to what change might have caused this recalculation?

@mportuga
Copy link
Member

mportuga commented Feb 2, 2018

I tried recreating that on version 4.2.3 and was unable to. Could you provide a plunker to help me debug as well?

@falsyvalues
Copy link
Contributor Author

@mportuga Its somehow connected to .ui-grid-header-canvas as you may see on image its switching from inherit to px value.

@falsyvalues
Copy link
Contributor Author

@mportuga Found it, its uiGridAutoResize directive, fef9552 made in #6481. I also described problem here #6470.

@falsyvalues
Copy link
Contributor Author

$scope.$watchGroup([
  function() {
    return gridUtil.elementWidth($elm);
  },
  function() {
    return gridUtil.elementHeight($elm);
  }
], function(newValues, oldValues, scope) {
  debounce(newValues[0], newValues[1]);
})

Result of this construction is always different and our debounce in called every 400ms thats why we see cycles on performance tab.

falsyvalues added a commit to falsyvalues/ui-grid that referenced this issue Feb 2, 2018
…lways triggers `refresh`, not conditionally as designed.

We allow `elementWidth` and `elementHeight` call only once per 200ms to prevent from perf degradation.

Fixes angular-ui#6561 angular-ui#6499.
mportuga pushed a commit that referenced this issue Feb 3, 2018
…lways triggers `refresh`, not conditionally as designed.

We allow `elementWidth` and `elementHeight` call only once per 200ms to prevent from perf degradation.

Fixes #6561 #6499.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
2 participants