It may seem minor, but I am looking for a solution if possible. I have a webpage where I want to implement a CSS gradient as the background. The page has a fixed header at the top with content scrolling behind it, and I want the background gradient to continue into the header. However, when coded, resizing the page causes the gradient not to refresh properly, resulting in banding.
The code snippet is like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{padding: 0;margin:0;}
.back{width:100vw;height:100vh;background: radial-gradient(ellipse,#fff 0%, #000 100%);overflow: hidden;position:fixed;top:0;left:0;z-index: -1}
.top{width: 100vw;height: 11.5vw;background: radial-gradient(ellipse at 50% 50vh,#fff 0%, #000 100%); position: fixed;top: 0;left: 0;z-index: 10}
</style>
</head>
<body>
<div class="back"></div>
<div class="top"></div>
</body>
</html>This setup results in: Working gradient example
However, upon resizing the page, it may appear like this: Broken gradient
The broken gradient persists until the page is refreshed. Any insights on why this occurs and how to resolve it?