Deck.gl: High GPU when leaving Deck view - Application becomes unresponsive for several seconds

[GiorgosXonikis]

Hello!

Description

When you leave a Deck view the GPU Process is rising up to 99% and the application becomes unresponsive for several seconds.

We get a console warning: _"luma: Device pixel ratio clamped"_:

The Performance devtool looks like this:

and

Repro Steps

I have created a similar example: https://angular-deck-issue.stackblitz.io
For instance, when you close deck view with _"Hide Map"_ button, the application becomes unresponsive for several seconds and during that time you are unable to interact with the input element.

Environment:

Framework Version:

• deck.gl:7.3.3

• mapbox-gl: 1.5.0

  Browser Version:

  • Chrome 77.0.3865.90 (64-bit)

    OS:

  • Ubuntu 18.04.2

Fix

I managed to bypass the problem by manually defining the canvas dimensions and setting them to null when Angular destroys the component:
ngOnDestroy() {
const canvas = <HTMLCanvasElement>document.getElementById('deckgl-overlay');
canvas.width = null;
canvas.height = null;
}

I am not sure if this is the best approach, but it seems to work for now!

[Pessimistress]

We don’t have an official Angular integration. Can you check when deck.finalize() is called in this process?

[Sebubu]

Bug seems related to #3728. SetDevicePixelRatio causes high CPU here as well.

[Pessimistress]

Is there a minimal app we can debug and test with?

[GiorgosXonikis]

Is there a minimal app we can debug and test with?

Yes!
https://stackblitz.com/edit/angular-deck-issue

[1chandu]

Problem seem to related to clientWidth and clientHeight of canvas are not set, working on a fix ...

[1chandu]

@GiorgosXonikis , can you you confirm if this problem goes away if you explicitly set useDevicePixels prop to false on Deck ?

[1chandu]

@GiorgosXonikis , we are seeing canvas.clientWidth and canvas.clientHeight both set to 0 when this issue happens, as @Pessimistress mentioned can you check deck.finalize() is called when Deck element or its parents are detached ? I am assuming it is not called, and when you do so, this problem shouldn't happen.

[Pessimistress]

@GiorgosXonikis More context: the default width and height of Deck are 100%, so it will try to resize the drawing buffer to canvas client dimensions on each frame. The attempt to resize leads to unintended consequences if the canvas is detached from the document. I'm not familiar with Angular, in React we call deck.finalize() before the component is unmounted: https://github.com/uber/deck.gl/blob/master/modules/react/src/deckgl.js#L101

[GiorgosXonikis]

@GiorgosXonikis , can you you confirm if this problem goes away if you explicitly set useDevicePixels prop to false on Deck ?

Yes, I set useDevicePixels: false and it worked!

@GiorgosXonikis More context: the default width and height of Deck are 100%, so it will try to resize the drawing buffer to canvas client dimensions on each frame. The attempt to resize leads to unintended consequences if the canvas is detached from the document. I'm not familiar with Angular, in React we call deck.finalize() before the component is unmounted: https://github.com/uber/deck.gl/blob/master/modules/react/src/deckgl.js#L101

This also worked! I Called this.deck.finalize() on Angular ngOnDestroy().

Thanks a lot!