Dashboard - Network interface fade away

TrueNAS General
1

I have a strange question.

Every time I access the TrueNAS Scale dashboard, version 24.10.1, through my Chromebook (HP Dragonfly), the network interface graph gradually disappears. This only happens with this graph; the CPU usage graph remains normal. See below:
https://gifyu.com/image/SXlpo

If I access it from Chrome on my Windows PC, this does not happen.

Does anyone have any idea what I can do to solve this?

2

Looks like a UI issue from the Chromebook side - you’d need to look into the HAR & Console logs from chrome to see if anything comes up.

What version of ChromeOS/Chrome are you running?

3

Version 130.0.6723.126.

What is odd is that CPU usage doesn’t have this problem, only the Network interface, and both seem to show a similar graph.

4

I was looking at the console logs from Chrome and I saw this:

<ix-widget-group _ngcontent-ng-c2570384435="" class="group ng-tns-c2570384435-7 quarters-and-half" _nghost-ng-c3241228498="">

This is the widget of the CPU usage.

<canvas _ngcontent-ng-c3387701899="" basechart="" type="line" width="712" height="210" style="display: block; box-sizing: border-box; height: 150px; width: 508px;"></canvas>

This is the part where the graph is loaded. We can see a 508x150 px.
But at the network interface widget, i see this:

<canvas _ngcontent-ng-c4202375817="" width="1" height="0" style="display: block; box-sizing: border-box; height: 0px; width: 1px;"></canvas>

A 1x0px window. That’s why I have this error.
But now how to solve this I don’t have any clues hahaha

5

Interesting -

Can you force CSS dimensions and see if it resolves it? (It won’t be a fix fix, just seeing if it fixes at a certain point)

Go into DevTools (F12), edit the CSS and force canvas element to the right size, might need to add the CSS yourself, would look like a little like

canvas {
  width: 508px;
  height: 150px;
}

If that fixes it, will confirm if it’s a layout related issue.

Another thing (though not sure how sure here), would be to go into DevTools Console and check for any JavaScript errors

Because it’s not happening on Windows and only ChromeOS, it might be a specific issue with how that version of Chrome is rendering this page, sorry I don’t have a Chromebook to mess around with and have a look as well to see if I can replicate this.

Changes to the CSS won’t be a perm fix, but if you’re able to pinpoint what it is and what fix it was, might be worth giving your steps you did to replicate issue/resolve issue with ChromeOS version etc to iX so they can maybe look into a perm fix if other people are able to replicate this on ChromeOS - could be as simple as a lazy-logic process that is broken on your version of chrome :person_shrugging:

6

It almost worked!
I did force the canvas element, but as you can see below, as soon as I hit enter, the graph got back but still fades away:
https://gifyu.com/image/SXWXl

Every pixel it gets smaller, I see an error in the DevTools Console saying:

[Violation] 'requestAnimationFrame' handler took 108ms
polyfills-4GSV3QYD.js:1

I just updated my Chromebook today to the latest version 131.0.6778.241, but it didn’t help much.

7

Bump. Can anyone help me solve this issue?