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

Question

我正在尝试为一个项目的网站使用混合模式，但我发现它们在我的 phone 浏览器上看起来不一样（chrome v 78.0.3904.84 在 iphone 7) 到我笔记本电脑上的浏览器（chrome v 78.0.3904.97 on mac）。 It looks like this on the laptop, and like this on the phone. 据我所知，这两种浏览器都支持混合混合模式，所以我不确定有什么不同。正在混合的元素的代码是：

    .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 元素不支持混合混合模式，但 chrome 中的 SVG 元素支持它。参见 https://caniuse.com/#search=mix-blend-mode

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

CSS overlay and screen blend modes look different on phone and laptop

css

mix-blend-mode