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

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

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

Answer 2

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.

Answer 3

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 4

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.