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

I've been running into the same problem. I have found that `background-repeat: repeat;` causes the blend mode to stop working on iOS. I don't know why, but if you set it to no-repeat, then it works. Obviously that isn't an ideal solution though. — Garconis, Mar 21 '16 at 15:35
Thank you for sharing this tip. it fixed the problem i encountered. — , Jan 03 '17 at 13:53

score 18 · Answer 1 · answered Mar 03 '17 at 15:38

18

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

answered Mar 03 '17 at 15:38

Катя Графінська

181
1
4

1

Yes. Rule background-repeat: no-repeat; helped me – Hydrock Nov 11 '21 at 21:02

score 1 · Answer 2 · answered Dec 05 '16 at 20:53

1

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.

answered Dec 05 '16 at 20:53

Gerrie Pretorius

3,381
2
31
34

2

That applies to `mix-blend-mode` not `background-blend-mode` – Oct 30 '19 at 20:05
Can you please share any link regarding the not supported items for mix-blend-mode? – Vigneshwaran Sivalingam Jul 07 '20 at 07:31
I believe `darken` doesnt work either. Atleast on `mix-blend-mode` – Cooper Scott Jan 09 '22 at 00:43

score 0 · Answer 3 · answered May 09 '17 at 16:25

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.

score 0 · Answer 4 · answered Feb 13 '20 at 22:29

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.

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

4 Answers4