css - CSS 覆盖和屏幕混合模式在手机和笔记本电脑上看起来不同

Question

我正在尝试为一个项目的网站使用混合模式，但我发现它们在我的手机浏览器（iphone 7 上的 chrome v 78.0.3904.84）与我笔记本电脑上的浏览器（chrome v 78.0.3904.97 上）看起来不同苹果电脑）。 在笔记本电脑上看起来像这样， 在手机上看起来像这样。 据我所知，两种浏览器都支持混合混合模式，所以我不确定有什么不同。正在混合的元素的代码是：

    .GraphButton {
    font-size: calc(10px + 8vmin);
    font-weight: 300;
    color: var(--button-text);
    background: var(--main-yellow);
    mix-blend-mode: overlay;
    height: 27vh;
    width: 35vw;
    margin: auto 6vw;
    overflow: hidden;
}

这是 svg 背景图像顶部的 div。不涉及转换。

有谁知道可能导致差异的原因或如何解决？

Answer 1

Safari 和 iOS Safari 中的 SVG 元素不支持 mix-blend-mode，但 chrome 中的 SVG 元素支持。见https://caniuse.com/#search=mix-blend-mode