CSS: A background-blend-mode fallback for iPhone Safari

Question

I'm susccesfully using background-blend-mode on my header here: https://yogrow.co/ecommerce-stack

However I've noticed that the background-blend-mode is not working on iPhone. I just get no background color.

Here is the CSS I am using

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

Is the only / best option to use media queries to create a new set of css rules or is there an alternative way to have a fallback so for devices like iPhone Safari that do not show the color bg the background goes to a red.

Because I have white text on top of the background it currently looks illegible on the iPhone safari.

Thanks

Answer 1

background-repeat: no-repeat worked for me, but in our application, the element in question could sometimes have a repeating background, so that solution was not sufficient. I found (in iOS 10.2) that any element with border-style set on it would not respect background-blend-mode; i.e., images and colors would not blend. Removing border-style (or any variants like border-bottom-style or border) fixed the issue.

Answer 2

It seems like background-blend-mode not working with background-repeat: repeat;. Try to set background-repeat: no-repeat;.

Answer 3

I absolutely needed background-repeat in my design. I have a transparent PNG over a solid color (a linear-gradient layer).

The workaround isn't exactly pretty: I load UAParser.js, and test for (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>

There will be a small lag, but I figure this is justified because it only affects the buggy clients.

Answer 4

It seems the following modes is not supported by safari for background-blend-mode: hugh, saturation,color and luminosity

I see the author of the question did not use one of the above mentioned, but it might help someone else.