[Dashboard Sidebar] Dynamic "Top" property is unsafe

[gustaveWPM]

This bug comes from web browsers. I have the same bug with both Firefox and Chrome. This is because sometimes getBoundingClientRect and window.getComputedStyle return an incorrect height. Both return exactly the same value.

I've also tried this approach:

const bodyRect = document.body.getBoundingClientRect();
const elemRect = (document.querySelector("#main-box-id") as HTMLElement).getBoundingClientRect();
const offset = elemRect.top - bodyRect.top;

Without success (still the same issue).

Resizing the window to a width low enough to hide the sidebar (by switching to a "Mobile version" width) and then resizing it again to a higher width corrects the problem on the fly.

This bug should be reported to Firefox and Chrome.

I intend to inform them when the project will be more advanced, providing an example quite similar to the dashboard sidebar code, so that they can test and reproduce the problem... And maybe fix it if I'm lucky.

This problem occurs when the page is loaded after the browser window has been resized to a certain width and height... Or not. There's nothing more to do than test odd window sizes and refresh the page each time to end up causing the bug.

The only work-around would be to use a hard-coded "top" property.

Screenshot :

[gustaveWPM]

Ohhhh, I disabled the Splash Screen and realized that it is due to this!

[gustaveWPM]

Well... It's fixed. https://github.com/Tirraa/dashboard_rtm/commit/e971d9c9fa297da36cbeb0d648bd1a558ffd6b53