I recently embarked on the task of building a website from scratch but ran into an unusual bug in Firefox. The issue causes the page to scroll down to the first div, completely bypassing its margin.
I want to clarify that I am not seeking a solution specific to Firefox; rather, I need assistance in finding a workaround for this problem.
Despite attempting various solutions by setting scroll values to 0 using JavaScript, nothing seems to work. I suspect that the distorted arrangement of my divs is causing this issue, but I'm unsure of the exact cause or how to rectify it.
For testing purposes, I am currently working with Firefox version 88.01 (latest as of 26.05.21)
HTML:
<!DOCTYPE html>
<html lang="en-US">
... (HTML code omitted for brevity)
</html>
CSS:
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: gray;
}
#titlebar {
background-color: #333;
overflow: hidden;
position: fixed;
top: 0px;
width: 100%;
z-index: 99;
box-shadow: 0px 2px 6px 6px rgba(0, 0, 0, 0.3);
}
... (CSS code omitted for brevity)
#end {
border-bottom-right-radius: 50px;
border-bottom-left-radius: 50px;
}