mdn / mdn/browser-compat-data

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

Open
#20,308 10 comments 8 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

browser:safari_ios data:css
Dominant language
JSON
Stars
5.8k
Forks
2.6k
Avg merge
1d 21h
Merged PRs (30d)
186

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing the CodePen reproduction and locating the browser-compatibility data entry for background-blend-mode. Verify the reported iOS/iPadOS Safari behavior against the existing support data, including repeating backgrounds and background-size; done means the compatibility information accurately reflects the tested behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.