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.
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.
This bug comes from web browsers.I have the same bug with both Firefox and Chrome.This is because sometimesgetBoundingClientRect
andwindow.getComputedStyle
return an incorrectheight
.Both return exactly the same value.I've also tried this approach:
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 :