I've been dabbling with Subtle Patterns for years to break up big swaths of negative space in my website designs.
Everything was rosy and magical... until now.
I used the Funky Lines subtle pattern for Blatherbrush, which has a color scheme based on your device's light mode preference.
To handle dark mode, I set up a good ol' background-blend-mode: multiply so the white parts of the pattern would become dark gray in dark mode. It worked on my machine so I deployed it and continued on my merry way.
It wasn't until I popped the site open in my iPhone that I realized everything was actually terrible. Check this out:
See the Pen
Uh Oh: Background-Blend-Mode + Big Repeating BG Image in Safari/Webkit by Matt Wing (@wingmatt)
on CodePen.
If you're on most browsers, that's blue... But on iOS Safari, it's white. It will be white if you open the embedded codepen in another tab, too. In these cases, the background-blend-mode rule doesn't affect the background-image.
Reproducing this quite the adventure as I couldn't figure out what ruleset was causing this. After barking up several wrong trees, I eventually learned that Safari has a hard time with background-blend-mode when the background in question has a repeating background tile over 256px in either dimension. Thanks to Damon and the Cassidoo Discord for helping me figure out what was actually going on here!
Take a look at this example with the same CSS, just with the background tile's size shrunk down a bit. This should work as expected everywhere:
See the Pen
All Good: Background-Blend-Mode + 256px Repeating BG Image in Safari/Webkit by Matt Wing (@wingmatt)
on CodePen.
Here's the Webkit bug tracker for this issue in case you want to see it "fixed" in "real time"!
I'm hoping this post becomes obsolete soon and you, dear reader, are baffled at the similarity between the examples above despite my claims. But as of March 2024, you can't use images over 256px in size for your repeating background-image tile if you're gonna be doing a background-blend-mode with them!