Bug: Dashboard widgets randomly glitch and change position

Hi,

I'm experiencing an issue with OMV6:

The dashboard widgets randomly change position (suddenly only two widgets per row) and they start glitching and flickering.

This happens very unpredictably. Sometime it happens with no input after staying for minutes on the dashboard site. Sometime it happen directly when switching to the dasboard. And sometimes it does not happen. I cannot reproduce it based on a potential trigger.

I already tried a few things. Clearing browser cache and cookies. Using a different browser than Safari (Chrome). Tried different widgets. Nothing solved the issue.

Before creating a bug report at GitHub I wanted to post here first. Please let me know when I can open a bug report or if there is a potential fix.

Platform info:

Version: 6.0.30-1

OS: macOS 12.4 and Windows 11 tested

Browser: Safari and Chrome

Heres a video of the issue:

Thanks, LIC

Zitat von Zoki

I can not exactly see what you are doing, but this may happen, if the scroll bar to the right appears and disapears.

[...]

Can you verify, if this is the case?

- Resizing the window makes it go away

- Scroll bar appears and disappers during the flickering

You can see in the video that the scrollbar is always visible, never goes away. Only the length of the scrollbar changes, because widgets change position.

Resizing the window during the error does not resolve it.

Zitat von votdev

This is not under control of the OMV UI. The browser is responsible of positioning and rendering the widgets.

Nevertheless, i never saw any problems here.

If it's an error by the browser, what are the chances that Safari and Chrome (on macOS and Windows) both behave like that? That would suggest a deeply layered issue in some core rendering functionalities of these browsers engines.

Zitat von Zoki

votdev Do you have focus / blur / hover events on the dashboard which slightly enlarge the components.

I remember we had the same effect with some text/ button which got bold when hovered. When one placed the mouse pointer directly at the border you got the very same effect. But there is nothing one can do about.

The error starts appearing without moving the cursor. When moving the cursor over elements or widgets, the issue stays the same.

Debug console output from Safari as soon as the issue starts:

The ResizeObserver error also gets thrown when resizing the window or clicking on a different menu item in the sidebar, but the widgets issue does not happen necessarily when this error gets thrown. If I don't resize the window and the widgets are working fine, no error is shown in the console.

If I scroll down on the dashboard, it jumps back up. So looks like something more is going on.

Video:

So what should we do about it? I'm not fully convinced that this is purely a browser issue, since it's happening with every browser (I now tested firefox, opera and Edge with chrome engine too, additionally to Safari and Chrome). Other sites using such designs don't have any problems, so something must be wrong on OMVs side or every Browser has the same bug.

Also the scroll bar on the right is not rendered properly.

Can I open a GitHub issue now?