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

Question

我在这里的标头上成功使用background-blend-mode：https://yogrow.co/ecommerce-stack

但是我注意到background-blend-mode在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中看起来难以辨认。

谢谢

Answer 1

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

Answer 2

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

我看到问题的作者没有使用上述提到的一种，但是可能会对其他人有所帮助。

Answer 3

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

Answer 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>

会有一个小的滞后，但是我认为这是合理的，因为它只会影响越野车客户。