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
- The top triangle over the logo is created as an
- A linear gradient colors the page vertically into two stripes using
But, the problem happens when I scroll
:
1) Chrome: I added a
2) Safari behaves differently: See scroll in the video , Chrome is left 
, Safari is right 
. In Safari, I don't get to see the
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
.Everything regarding the background is created on the
html- The top triangle over the logo is created as an
html::after- A linear gradient colors the page vertically into two stripes using
background: linear-gradient(...);htmlBut, the problem happens when I scroll
:1) Chrome: I added a
background-color: oklch(...)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-colorbackground: linear-gradient(...)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
backgroundbackground-imagehtml
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Was this page helpful?
