CSS：iPhone Safari 的背景混合模式回退答案

【问题标题】：CSS: A background-blend-mode fallback for iPhone SafariCSS：iPhone Safari 的背景混合模式回退
【发布时间】：2020-02-14 06:29:58
【问题描述】：

我在这里的标题上成功使用了背景混合模式：https://yogrow.co/ecommerce-stack

但是我注意到背景混合模式在 iPhone 上不起作用。我只是没有背景颜色。

这是我正在使用的 CSS

background-repeat: repeat;
background-image: url("assets/img/swirl_pattern.png");
background-color: #E33551;
background-blend-mode: multiply;

是使用媒体查询创建一组新的 css 规则的唯一/最佳选择，或者是否有替代方法来进行后备，因此对于 iPhone Safari 等不显示颜色的设备，背景变为红色.

因为我在背景顶部有白色文本，所以它目前在 iPhone safari 上看起来难以辨认。

谢谢

【问题讨论】：

我也遇到了同样的问题。我发现background-repeat: repeat; 导致混合模式在 iOS 上停止工作。我不知道为什么，但是如果您将其设置为不重复，那么它可以工作。显然这不是一个理想的解决方案。
感谢您分享此技巧。它解决了我遇到的问题。

标签： ios css iphone safari background-blend-mode

【解决方案1】：

似乎背景混合模式不适用于background-repeat: repeat;。尝试设置background-repeat: no-repeat;。

【讨论】：

是的。规则背景重复：不重复；帮助了我

【解决方案2】：

对于背景混合模式，Safari 似乎不支持以下模式：休、饱和度、色彩和亮度

我看到问题的作者没有使用上述任何一种方法，但它可能对其他人有所帮助。

【讨论】：

这适用于mix-blend-mode 而不是background-blend-mode
你能分享任何关于混合混合模式不支持的项目的链接吗？
我相信darken 也不起作用。至少在mix-blend-mode

【解决方案3】：

background-repeat: no-repeat 为我工作，但在我们的应用程序中，有问题的元素有时可能具有重复的背景，因此该解决方案是不够的。我发现（在 iOS 10.2 中）任何设置了border-style 的元素都不会尊重background-blend-mode；即，图像和颜色不会融合。删除 border-style（或任何变体，如 border-bottom-style 或 border）解决了这个问题。

【讨论】：

【解决方案4】：

我的设计中绝对需要background-repeat。我在纯色（线性渐变层）上有一个透明的 PNG。

解决方法不是很漂亮：我加载 UAParser.js，并测试 (iOS && WebKit)。

<script src='https://cdnjs.cloudflare.com/ajax/libs/UAParser.js/0.7.21/ua-parser.min.js'></script>
<script>
window.workaroundBackgroundBlendMode = (function() {
  var ua = UAParser()
  var isWebKit = (ua.engine.name === "WebKit")
  var isIOS = (ua.os.name === "iOS")
  var debug = false //|| true
  var shouldActivate = (isWebKit && isIOS) || debug;

  if (shouldActivate) {
    document.body.classList.add("is-ios-webkit")
  }

  // You can inspect this returned object afterwards
  return {isWebKit, isIOS, debug, shouldActivate, ua}
})()
</script>

会有一点延迟，但我认为这是合理的，因为它只会影响有问题的客户端。

【讨论】：