Bug 259081 - `background-blend-mode` not applied for some background image sizes / repeat
Summary: `background-blend-mode` not applied for some background image sizes / repeat
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: WebKit Nightly Build
Hardware: iPhone / iPad Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2023-07-10 16:23 PDT by strarsis
Modified: 2024-06-12 10:22 PDT (History)
6 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description strarsis 2023-07-10 16:23:02 PDT
`background-blend-mode` is not applied when the background image has a specific size relative to the DOM element.
This only occurs in iOS/iPad OS Safari.
Empirically, it appears that the background image size has to be smaller than 256 pixel on one side, 
the issue is sometimes also caused by repeating the background in the direction where the background image dimension is smaller than 256 pixels.

A variety of examples that use `background-blend-mode` which do work and do not work in iOS / iPad OS Safari:
https://codepen.io/strarsis/pen/poQWPOX

Minimal, reproducible sample:
https://codepen.io/strarsis/pen/ZEmXyxL

Feature (or rather bug) detection:
https://codepen.io/strarsis/pen/YzRrbaZ


MDN browser compat data issue:
https://github.com/mdn/browser-compat-data/issues/20308
Comment 1 Radar WebKit Bug Importer 2023-07-17 16:23:17 PDT
<rdar://problem/112435175>