`background-blend-mode` - iOS Safari: Ignored with repeating background (also depends on background size)

[strarsis]

What type of issue is this?

Incorrect support data (example: Chrome says "86" but support was added in "40")

What information was incorrect, unhelpful, or incomplete?

background-blend-mode is not applied by iOS/iPad OS Safari when the background also repeats (additionally depending on background-size values).

When background-blend-mode is used together with a background-color, iOS/iPad OS Safari will not blend the background image when the background is also repeated. This bug does not solely depend on just the background repeat, as it may or may not work sometimes depending on what is used as background-size: When background-size is smaller than 79% of its size, background-blend-mode is also applied in a repeating background.

CodePen: https://codepen.io/strarsis/pen/poQWPOX

What browsers does this problem apply to, if applicable?

Safari

What did you expect to see?

background-blend-mode correctly applied iOS/iPad OS Safari, as in the other browsers.

Did you test this? If so, how?

I encountered the issue while testing on an iPad device. Then I created a test case to isolate the cause of the problem in iOS/iPad OS Safari.

CodePen: https://codepen.io/strarsis/pen/poQWPOX

Can you link to any release notes, bugs, pull requests, or MDN pages related to this?

https://stackoverflow.com/questions/35452263/css-a-background-blend-mode-fallback-for-iphone-safari

Do you have anything more you want to share?

No response

MDN URL

No response

MDN metadata

No response

[strarsis]

So new findings: It has something to do with the element width or height being larger than 256px and the background-size width and height being equal or smaller than 256px (even by just one pixel). 256 is a typical size used for allocating things, so this hints towards some memory issue in iOS/iPad OS Safari browser. Refined, reproducible sample: https://codepen.io/strarsis/pen/ZEmXyxL The issue also reproducible with an element and background image dimensions of 1px × 1px.

[strarsis]

Feature test: https://codepen.io/strarsis/pen/YzRrbaZ

[strarsis]

WebKit bug report: https://bugs.webkit.org/show_bug.cgi?id=259081

[queengooborg]

Hey @strarsis, thanks for tracking this down and doing all of this research! Would you be down to open a pull request to update the data accordingly?

[strarsis]

Edit: I found the right file for this: https://github.com/Fyrd/caniuse/blob/main/features-json/css-backgroundblendmode.json

[queengooborg]

Edit: I found the right file for this: https://github.com/Fyrd/caniuse/blob/main/features-json/css-backgroundblendmode.json

Oh that file is for CanIUse, not for BCD! The BCD file is here: https://github.com/mdn/browser-compat-data/blob/main/css/properties/background-blend-mode.json

[FaisalHet]

https://app.intercom.com/a/inbox/hrpt54hy/inbox/admin/2048371/conversation/215470456788004

[Sparronator9999]

I have also run into this issue while developing my website. The solution for me was to use a nested element to do the background image filtering (here implemented with the ::before pseudo-element).

So instead of the following example CSS (which would trigger the bug):

.filtered-bg
{
    /* image must have a length or width of 256px or higher to trigger the bug!
     * magenta is used for the background colour to make the bug more obvious
     * (assuming your background isn't already magenta...) */
    background: #ff00ff url("bg.png");
    background-blend-mode: multiply;
    width: 640px;
    height: 480px;
}

You could instead write:

.filtered-bg-fixed
{
    background: url("bg.png");
    width: 640px;
    height: 480px;
    position: relative;
}
.filtered-bg-fixed::before
{
    background: #ff00ff;
    content: "";
    mix-blend-mode: multiply;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

If the div you're applying the fix to has any content, you'll want to place it in a nested container div (if you haven't already) with the following code, otherwise it will also be filtered with the "fixed" code:

.filtered-bg-content
{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    /* z-index wasn't needed for me here, but may be depending on how you use this CSS */
}

I don't have CodePen to write a demonstration, but I might make a page on my website showing off the bug.

[strarsis]

@Sparronator9999: This is very interesting as I am still looking for a viable workaround with no side-effects on the other browsers.

[Sparronator9999]

This is very interesting as I am still looking for a viable workaround with no side-effects on the other browsers.

Oh wow, I thought you would've figured out a workaround by now. I mainly posted a solution here for the benefit of others that may come across this issue.