ag-grid: IE and EDGE crash

I’m submitting a … (check one with “x”)

[x ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/ceolter/ag-grid/blob/master/CONTRIBUTING.md#question

Current behavior Using Angular 6 & latest version of ag-grid (18.0.1 I believe at the time of posting this)- after upgrading ag-grid from 17.1.1 to 18.x, whenever i navigate to a page that has ag-grid on it, the browser freezes up. I opened dev tools and managed to capture an error before it froze. The error said “onResize doesn’t exist” or something of this nature. My TS/JS is not using any resize functions what-so ever. This works fine on chrome but IE and edge no longer work. I reverted back to 17.1.1 and everything was working again. (Aside from the clunky crappy scrolling behavior in IE and EDGE when using a large grid (many columns) with a pinned column(s).

Expected behavior To load and not freeze/crash… I was hoping the update would improve IE and Edge performance, not do the opposite.

Minimal reproduction of the problem with instructions simply add an ag-grid onto an html page within an angular 5/6 application. Code Example: https://pastebin.com/ZQjU2NpF

Please tell us about your environment: VSCODE (NodeJS, CLI, Etc.), Angular 5/6 (Tried in both).

  • ag-Grid version: X.X.X 18.0.1, 18.1.0

  • Browser: Internet Explorer, MS Edge.

  • Language: [all | TypeScript X.X | ES6/7 | ES5] TypeScript, ES6/7 (Used), HTML. etc.

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 9
  • Comments: 28 (4 by maintainers)

Most upvoted comments

I do believe it has to do with the new resizeObserver.js. With Firefox and IE ag-grid starts monitoring the resize using a MutationObserver:

this.mutationsObserver_.observe(document, { attributes: true, childList: true, characterData: true, subtree: true });

The monitoring of the attributes on the document level kills basically the performance, respectivelly freezes the browser.

We need an urgent fix for this! (just found the reason of the problem today!)

+7
vitodata on Jul 5, 2018

Hi,

Just to let you know that we are working in a solution for this, we are hoping to have it available in our next release, that should be available in the next 2/3 weeks.

I am afraid that for the time being the only solution would be to downgrade to v17 or to not combine ag-grid with ng-bootstrap

Thanks

+3
makinggoodsoftware on Aug 1, 2018

@dominikg @ExDeaDguY

Your link is freezing in IE11 in my computer. Probably on a infinite loop. The problem is definitively not solved.

Can we reopen that issue please ?

+3
jfpicard1 on Aug 1, 2018

still freezes in firefox ( ag-grid 18.1.2 / ng-bootstrap 2.2.0 )

https://angular-ng-bootstrap-ag-grid-fail-ymr3ut.stackblitz.io/

https://stackblitz.com/edit/angular-ng-bootstrap-ag-grid-fail-ymr3ut

console output:

08:21:46.812 too much recursion[Weitere Informationen] 2 engineblock-bc7b07e99ec5c6739c766b4898e4cff5acfddc137ccb7218377069c32731f1d0.js%20line%201%20%3E%20eval:1342:68
	DefaultDomRenderer2.prototype.addClass dom_renderer.ts:178:42
	DebugRenderer2.prototype.addClass services.ts:787:4
	NgbDropdownMenu</NgbDropdownMenu.prototype.applyPlacement dropdown.js:55
	NgbDropdownMenu</NgbDropdownMenu.prototype.position dropdown.js:40
	NgbDropdown</NgbDropdown.prototype._positionMenu dropdown.js:206
	NgbDropdown/this._zoneSubscription< dropdown.js:142:72
	EventEmitter.prototype.subscribe/schedulerFn< event_emitter.ts:101:55
	SafeSubscriber.prototype.__tryOrUnsub Subscriber.ts:270:6
	SafeSubscriber.prototype.next Subscriber.ts:212:8
	Subscriber.prototype._next Subscriber.ts:142:4
	Subscriber.prototype.next Subscriber.ts:102:6
	Subject.prototype.next Subject.ts:62:8
	EventEmitter.prototype.emit event_emitter.ts:78:20
	checkStable/< ng_zone.ts:247:39
	ZoneDelegate.prototype.invoke https://angular-ng-bootstrap-ag-grid-fail-ymr3ut.stackblitz.io/turbo_modules/zone.js@0.8.26/dist/zone.js:388:17
	Zone.prototype.run https://angular-ng-bootstrap-ag-grid-fail-ymr3ut.stackblitz.io/turbo_modules/zone.js@0.8.26/dist/zone.js:138:24
	NgZone.prototype.runOutsideAngular ng_zone.ts:220:12
	checkStable ng_zone.ts:247:10
	onLeave ng_zone.ts:314:2
	onInvokeTask ng_zone.ts:266:8
	ZoneDelegate.prototype.invokeTask https://angular-ng-bootstrap-ag-grid-fail-ymr3ut.stackblitz.io/turbo_modules/zone.js@0.8.26/dist/zone.js:420:17
	Zone.prototype.runTask https://angular-ng-bootstrap-ag-grid-fail-ymr3ut.stackblitz.io/turbo_modules/zone.js@0.8.26/dist/zone.js:188:28
	ZoneTask.invokeTask https://angular-ng-bootstrap-ag-grid-fail-ymr3ut.stackblitz.io/turbo_modules/zone.js@0.8.26/dist/zone.js:496:24
	invokeTask https://angular-ng-bootstrap-ag-grid-fail-ymr3ut.stackblitz.io/turbo_modules/zone.js@0.8.26/dist/zone.js:1540:9
	globalZoneAwareCallback https://angular-ng-bootstrap-ag-grid-fail-ymr3ut.stackblitz.io/turbo_modules/zone.js@0.8.26/dist/zone.js:1566:17
	positionElements positioning.js:262
	NgbDropdownMenu</NgbDropdownMenu.prototype.position dropdown.js:40
	NgbDropdown</NgbDropdown.prototype._positionMenu dropdown.js:206
	NgbDropdown/this._zoneSubscription< dropdown.js:142:72
	EventEmitter.prototype.subscribe/schedulerFn< event_emitter.ts:101:55
	SafeSubscriber.prototype.__tryOrUnsub Subscriber.ts:270:6
	SafeSubscriber.prototype.next Subscriber.ts:212:8
	Subscriber.prototype._next Subscriber.ts:142:4
	Subscriber.prototype.next Subscriber.ts:102:6
	Subject.prototype.next Subject.ts:62:8
	EventEmitter.prototype.emit event_emitter.ts:78:20
	checkStable/< ng_zone.ts:247:39
	ZoneDelegate.prototype.invoke https://angular-ng-bootstrap-ag-grid-fail-ymr3ut.stackblitz.io/turbo_modules/zone.js@0.8.26/dist/zone.js:388:17
	Zone.prototype.run https://angular-ng-bootstrap-ag-grid-fail-ymr3ut.stackblitz.io/turbo_modules/zone.js@0.8.26/dist/zone.js:138:24
	NgZone.prototype.runOutsideAngular ng_zone.ts:220:12
	checkStable ng_zone.ts:247:10
	onLeave ng_zone.ts:314:2
	onInvokeTask ng_zone.ts:266:8
	ZoneDelegate.prototype.invokeTask https://angular-ng-bootstrap-ag-grid-fail-ymr3ut.stackblitz.io/turbo_modules/zone.js@0.8.26/dist/zone.js:420:17
	Zone.prototype.runTask https://angular-ng-bootstrap-ag-grid-fail-ymr3ut.stackblitz.io/turbo_modules/zone.js@0.8.26/dist/zone.js:188:28
	ZoneTask.invokeTask https://angular-ng-bootstrap-ag-grid-fail-ymr3ut.stackblitz.io/turbo_modules/zone.js@0.8.26/dist/zone.js:496:24
	invokeTask https://angular-ng-bootstrap-ag-grid-fail-ymr3ut.stackblitz.io/turbo_modules/zone.js@0.8.26/dist/zone.js:1540:9
	globalZoneAwareCallback https://angular-ng-bootstrap-ag-grid-fail-ymr3ut.stackblitz.io/turbo_modules/zone.js@0.8.26/dist/zone.js:1566:17
	DefaultDomRenderer2.prototype.addClass dom_renderer.ts:178:42
	DebugRenderer2.prototype.addClass services.ts:787:4
	NgbDropdownMenu</NgbDropdownMenu.prototype.applyPlacement dropdown.js:55
	NgbDropdownMenu</NgbDropdownMenu.prototype.position dropdown.js:40
	NgbDropdown</NgbDropdown.prototype._positionMenu dropdown.js:206
	NgbDropdown/this._zoneSubscription< dropdown.js:142:72
	EventEmitter.prototype.subscribe/schedulerFn< event_emitter.ts:101:55
	SafeSubscriber.prototype.__tryOrUnsub Subscriber.ts:270:6
	SafeSubscriber.prototype.next Subscriber.ts:212:8
	Subscriber.prototype._next Subscriber.ts:142:4
	Subscriber.prototype.next Subscriber.ts:102:6
	Subject.prototype.next Subject.ts:62:8
	EventEmitter.prototype.emit event_emitter.ts:78:20
	checkStable/< ng_zone.ts:247:39
	ZoneDelegate.prototype.invoke https://angular-ng-bootstrap-ag-grid-fail-ymr3ut.stackblitz.io/turbo_modules/zone.js@0.8.26/dist/zone.js:388:17
	Zone.prototype.run https://angular-ng-bootstrap-ag-grid-fail-ymr3ut.stackblitz.io/turbo_modules/zone.js@0.8.26/dist/zone.js:138:24
	NgZone.prototype.runOutsideAngular ng_zone.ts:220:12
	checkStable ng_zone.ts:247:10
	onLeave ng_zone.ts:314:2
	onInvokeTask ng_zone.ts:266:8
	ZoneDelegate.prototype.invokeTask https://angular-ng-bootstrap-ag-grid-fail-ymr3ut.stackblitz.io/turbo_modules/zone.js@0.8.26/dist/zone.js:420:17
	Zone.prototype.runTask https://angular-ng-bootstrap-ag-grid-fail-ymr3ut.stackblitz.io/turbo_modules/zone.js@0.8.26/dist/zone.js:188:28
	ZoneTask.invokeTask https://angular-ng-bootstrap-ag-grid-fail-ymr3ut.stackblitz.io/turbo_modules/zone.js@0.8.26/dist/zone.js:496:24
	invokeTask https://angular-ng-bootstrap-ag-grid-fail-ymr3ut.stackblitz.io/turbo_modules/zone.js@0.8.26/dist/zone.js:1540:9
	globalZoneAwareCallback https://angular-ng-bootstrap-ag-grid-fail-ymr3ut.stackblitz.io/turbo_modules/zone.js@0.8.26/dist/zone.js:1566:17
	positionElements positioning.js:262
	NgbDropdownMenu</NgbDropdownMenu.prototype.position dropdown.js:40
	NgbDropdown</NgbDropdown.prototype._positionMenu dropdown.js:206
	NgbDropdown/this._zoneSubscription< dropdown.js:142:72
	EventEmitter.prototype.subscribe/schedulerFn< event_emitter.ts:101:55
	SafeSubscriber.prototype.__tryOrUnsub Subscriber.ts:270:6
	SafeSubscriber.prototype.next Subscriber.ts:212:8
	Subscriber.prototype._next Subscriber.ts:142:4
	Subscriber.prototype.next Subscriber.ts:102:6
	Subject.prototype.next Subject.ts:62:8
	EventEmitter.prototype.emit event_emitter.ts:78:20
	checkStable/< ng_zone.ts:247:39
	ZoneDelegate.prototype.invoke https://angular-ng-bootstrap-ag-grid-fail-ymr3ut.stackblitz.io/turbo_modules/zone.js@0.8.26/dist/zone.js:388:17
	Zone.prototype.run https://angular-ng-bootstrap-ag-grid-fail-ymr3ut.stackblitz.io/turbo_modules/zone.js@0.8.26/dist/zone.js:138:24
	NgZone.prototype.runOutsideAngular ng_zone.ts:220:12
	checkStable ng_zone.ts:247:10
	onLeave ng_zone.ts:314:2
	onInvokeTask ng_zone.ts:266:8
	ZoneDelegate.prototype.invokeTask https://angular-ng-bootstrap-ag-grid-fail-ymr3ut.stackblitz.io/turbo_modules/zone.js@0.8.26/dist/zone.js:420:17
	Zone.prototype.runTask https://angular-ng-bootstrap-ag-grid-fail-ymr3ut.stackblitz.io/turbo_modules/zone.js@0.8.26/dist/zone.js:188:28
	ZoneTask.invokeTask https://angular-ng-bootstrap-ag-grid-fail-ymr3ut.stackblitz.io/turbo_modules/zone.js@0.8.26/dist/zone.js:496:24
	invokeTask https://angular-ng-bootstrap-ag-grid-fail-ymr3ut.stackblitz.io/turbo_modules/zone.js@0.8.26/dist/zone.js:1540:9
	globalZoneAwareCallback https://angular-ng-bootstrap-ag-grid-fail-ymr3ut.stackblitz.io/turbo_modules/zone.js@0.8.26/dist/zone.js:1566:17
	DefaultDomRenderer2.prototype.removeClass dom_renderer.ts:180:45
	DebugRenderer2.prototype.removeClass services.ts:795:4
	NgbDropdownMenu</NgbDropdownMenu.prototype.applyPlacement dropdown.js:45
	NgbDropdownMenu</NgbDropdownMenu.prototype.position dropdown.js:40
	NgbDropdown</NgbDropdown.prototype._positionMenu dropdown.js:206
	NgbDropdown/this._zoneSubscription< dropdown.js:142:72
	EventEmitter.prototype.subscribe/schedulerFn< event_emitter.ts:101:55
	SafeSubscriber.prototype.__tryOrUnsub Subscriber.ts:270:6
	SafeSubscriber.prototype.next Subscriber.ts:212:8
	Subscriber.prototype._next Subscriber.ts:142:4
	Subscriber.prototype.next Subscriber.ts:102:6
	Subject.prototype.next Subject.ts:62:8
	EventEmitter.prototype.emit event_emitter.ts:78:20
	checkStable/< ng_zone.ts:247:39
	ZoneDelegate.prototype.invoke https://angular-ng-bootstrap-ag-grid-fail-ymr3ut.stackblitz.io/turbo_modules/zone.js@0.8.26/dist/zone.js:388:17
	Zone.prototype.run https://angular-ng-bootstrap-ag-grid-fail-ymr3ut.stackblitz.io/turbo_modules/zone.js@0.8.26/dist/zone.js:138:24
	NgZone.prototype.runOutsideAngular ng_zone.ts:220:12
	checkStable ng_zone.ts:247:10
	onLeave ng_zone.ts:314:2
	onInvokeTask ng_zone.ts:266:8
	ZoneDelegate.prototype.invokeTask https://angular-ng-bootstrap-ag-grid-fail-ymr3ut.stackblitz.io/turbo_modules/zone.js@0.8.26/dist/zone.js:420:17
	Zone.prototype.runTask https://angular-ng-bootstrap-ag-grid-fail-ymr3ut.stackblitz.io/turbo_modules/zone.js@0.8.26/dist/zone.js:188:28
	ZoneTask.invokeTask https://angular-ng-bootstrap-ag-grid-fail-ymr3ut.stackblitz.io/turbo_modules/zone.js@0.8.26/dist/zone.js:496:24
	invokeTask https://angular-ng-bootstrap-ag-grid-fail-ymr3ut.stackblitz.io/turbo_modules/zone.js@0.8.26/dist/zone.js:1540:9
	globalZoneAwareCallback https://angular-ng-bootstrap-ag-grid-fail-ymr3ut.stackblitz.io/turbo_modules/zone.js@0.8.26/dist/zone.js:1566:17
	DefaultDomRenderer2.prototype.removeClass dom_renderer.ts:180:45
	DebugRenderer2.prototype.removeClass services.ts:795:4
	NgbDropdownMenu</NgbDropdownMenu.prototype.applyPlacement dropdown.js:45
	NgbDropdownMenu</NgbDropdownMenu.prototype.position dropdown.js:40
	NgbDropdown</NgbDropdown.prototype._positionMenu dropdown.js:206
	NgbDropdown/this._zoneSubscription< dropdown.js:142:72
	EventEmitter.prototype.subscribe/schedulerFn< event_emitter.ts:101:55
+3
dominikg on Jul 27, 2018

Release 18.1.2 of ag-grid fixes this issue. Thanks for reporting this.

+3
seanlandsman on Jul 25, 2018

safari also freezes

+2
alyalin on Jul 12, 2018

Also ran into this issue on FF and Edge. Glad to hear you guys are working on it.

For anyone else out there, I was able to get the current release 18.1.0 working by commenting out the following lines. I’ve haven’t noticed any issues. I wouldn’t recommend doing this in a production app, luckily my app is still in development so this approach was favorable over downgrading while I wait for the next release.

dist\lib\resideObserver.js (lines 186-189)

ResizeObserverController.prototype.connect_ = function () {
        if (this.connected_) {
            return;
        }
        // window.addEventListener("resize", this.refresh);
        // document.addEventListener("DOMSubtreeModified", this.refresh);
        // this.mutationEventsAdded_ = true;
        // this.connected_ = true;
    };
+1
jason2211 on Aug 16, 2018

@makinggoodsoftware

Just for your information, we use here: “bootstrap”: “^3.3.7”, “ngx-bootstrap”: “^3.0.1”,

And reverting to v16 solved the problem.

+1
jfpicard1 on Aug 1, 2018

@ExDeaDguY opening https://angular-ng-bootstrap-ag-grid-fail-ymr3ut.stackblitz.io/ with firefox 61.01 (macos) and clicking on ‘toggle dropdown’ causes lots of console outputs with ‘too much recursion’ and the dropdown cannot be closed. see earlier comment

what did you do in your app to avoid that?

+1
dominikg on Aug 1, 2018

still freezes

+1
Shemesh on Jul 30, 2018

Fully agree with @vitodata. Exactly the same case i have meet (angular 5.2.11, ag-grid 18.0.1/18.1.0, Firefox 61). Chrome works good, IE & Edge didn’t check. After commenting out these lines in ./lib/resizeObserver.js:

this.mutationsObserver_ = new MutationObserver(this.refresh);
 this.mutationsObserver_.observe(document, {
     attributes: true,
      childList: true,
      characterData: true,
     subtree: true
});

in FF everything works fine. I’m your strongest supporter in quickly finding a fix 😃

+1
macqbat on Jul 6, 2018
Read more comments on GitHub
← ag-grid: Grid with style="width: 100%; height 100%" overflow in ver 20.0.0
ag-grid: Jest encountered an unexpected token →