html - 混合颜色混合在 Safari 中无法正常工作

Question

我在 safari 中使用 mix-color-blend 时遇到问题。我在这里查看了其他答案，但它们似乎不起作用。我正在使用剪辑路径创建一个 z-index 低于我的文本的弯曲层，然后我希望文本位于上方，并且能够根据背景更改颜色。它已经在 chrome 中工作了，但是在 safari 中将容器隔离为静态并没有帮助，因为我需要背景层或文本是绝对位置。我将附上所需结果和实际结果的屏幕截图。

代码：

.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 className='Homepage' id='homepage'>
        <div className='HomepageColored'>
            <NavBar positions={props.positions}/>
        </div>
        <div className='HomeText'>
            <h1 className='FirstLine'><i>We believe</i></h1>
            <h1 className='SecondLine'><i>in</i></h1>
            <h1 className='ThirdLine'><i>Experiences</i></h1>
        </div>
        
    </div>

标签： htmlcss