Help: background and background-color in Chrome vs. Safari

Hi! I am trying to create a design that looks like attached image ⬇️ . Everything regarding the background is created on the html element: - The top triangle over the logo is created as an html::after element. - A linear gradient colors the page vertically into two stripes using background: linear-gradient(...); on the html selector. But, the problem happens when I scroll 😕 : 1) Chrome: I added a background-color: oklch(...) that matches the color of the top triangle. If not, I could see glimpses of a white background on top of the page and at bottom of page. 2) Safari behaves differently: See scroll in the video ⬇️ , Chrome is left ⬅️ , Safari is right ➡️ . In Safari, I don't get to see the background-color , I only see the background: linear-gradient(...), which makes it look funny on the top, but great at the bottom. The app can be inspected at https://offentlig-frontend.netlify.app/ Ideally, I want: - The light color just on the top of the page to make it look like the top triangle grows into a larger area on the top - The linear gradient to grow indefinitely at the bottom Qs: Anyone that knows how to achieve this? Or anyonw knows how to dealt with the differences on how Safari and Chrome treats background vs background-image, at least on the html selector? 🙏 👍