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:

    External Content youtu.be
    Content embedded from external sources will not be displayed without your consent.
    Through the activation of external content, you agree that personal data may be transferred to third party platforms. We have provided more information on this in our privacy policy.



    Thanks, LIC

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


    When the scroll bar disappears, there is space for three rows of widgets, then the browser puts the scroll bar on the screen and now the area is to small for three rows and the UI does a re-layout to two rows. This makes the used screen area again small enough so the scroll bar disappears and you have space for three rows again and now the story continues.


    The problem should go away, if you make your browser window a bit larger or smaller.


    Can you verify, if this is the case?

    - Resizing the window makes it go away

    - Scroll bar appears and disappers during the flickering

    If you got help in the forum and want to give something back to the project click here (omv) or here (scroll down) (plugins) and write up your solution for others.

  • 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.

    If you got help in the forum and want to give something back to the project click here (omv) or here (scroll down) (plugins) and write up your solution for others.

  • 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.


    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.


    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:

    External Content youtu.be
    Content embedded from external sources will not be displayed without your consent.
    Through the activation of external content, you agree that personal data may be transferred to third party platforms. We have provided more information on this in our privacy policy.


    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?

  • Looks like there is something wrong with the scaling of the widgets because the third column should be used in video. Maybe it is a framework?? Go ahead and file an issue but Volker will be out of holiday for a while. So, there won't be much being looked at for a while.

    omv 6.0.30-1 Shaitan | 64 bit | 5.15 proxmox kernel | plugins :: omvextrasorg 6.0.9 | kvm 6.1.19 | mergerfs 6.1.1 | zfs 6.0.9
    omv-extras.org plugins source code and issue tracker - github


    Please try ctrl-shift-R and read this before posting a question.
    Please don't PM for support... Too many PMs!

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!