Encountered an issue in Chrome where the position:fixed property does not behave as expected. While this code works fine in Firefox and Safari, it seems to have a glitch in Chrome (69.0.3497.100). When scrolling, the blue div moves and reveals the green background in Chrome, whereas in Firefox and Safari, the green is always hidden without any scrolling. Any insights on why this discrepancy occurs and how to achieve real fixed positioning in Chrome?
div {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: blue;
}
body {
background-color: green;
}On testing this code snippet directly in Chrome, it appeared to work correctly when displayed in fullscreen mode. However, creating a new HTML file and opening it triggered the bug once again.
<html>
<body>
<div></div>
<style>
div {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: blue;
}
body {
background-color: green;
}
</style>
</body>
</html>