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

html

html

html element:
- The top triangle over the logo is created as an

html::after

html::after

html::after

html::after element.
- A linear gradient colors the page vertically into two stripes using

background: linear-gradient(...);

background: linear-gradient(...);

background: linear-gradient(...);

background: linear-gradient(...); on the

html

html

html

html selector.

But, the problem happens when I scroll

:
1) Chrome: I added a

background-color: oklch(...)

background-color: oklch(...)

background-color: oklch(...)

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

background-color

background-color

background-color , I only see the

background: linear-gradient(...)

background: linear-gradient(...)

background: linear-gradient(...)

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