I'm having an issue using the mix-color-blend in safari. I've checked out other answers here but they don't seem to work. I'm using a clippath to create a curved layer with a lower z-index than my text, and then I want the text to be above, and able to change colors according to the background. It's working in chrome already, but isolating the container in safari e changing position to static is not helping since I need either the background layer or the text to be position absolute. I'll attach screenshots of the desired outcome and the actual outcome.
CODE:
.Homepage {
height: 800px;
}
.HomepageColored {
background-color: rgb(8,141,165);
height: inherit;
clip-path: ellipse(80% 60% at 0 0);
}
h1 {
font-family: 'Playfair Display', serif;
}
.HomeText {
position: absolute;
width: 100%;
height: auto;
left: 0;
top: 90px;
text-align: center;
}
.FirstLine {
padding-right: 500px;
font-size: 5rem;
color: rgb(0,255,255);
}
.SecondLine {
font-size: 5rem;
color: rgb(8,141,165);
mix-blend-mode: color-dodge;
}
.ThirdLine {
padding-left: 550px;
font-size: 5rem;
color: rgb(8,141,165);
}<div class="Homepage" id="homepage"><div class="HomepageColored"><NavBar positions={props.positions}/></div><div class="HomeText"><h1 class="FirstLine"><i>We believe</i></h1><h1 class="SecondLine"><i>in</i></h1><h1 class="ThirdLine"><i>Experiences</i></h1></div></div>
