`background-blend-mode` - iOS Safari: Ignored with repeating background (also depends on background size)
Nobody has claimed this yet.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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