Skip to content

[css-compositing-2] Add lighter composite operator to mix-blend-mode #445

@khushalsagar

Description

@khushalsagar

This issue proposes adding "plus-lighter" to the list of blend modes specified in the Compositing and Blending spec. This blend mode is useful when cross-fading 2 elements for which all or a subset of pixels have identical color values. An example showing the problem is here : https://static-misc-3.glitch.me/composite-test/2.html.

Consider 2 elements each having a pixel with value C. These 2 elements are multiplied with opacity α and (1-α) respectively and placed in an isolated group. When blending using the 'normal' blend mode, the resulting pixel value is produced by source over compositing of the 2 elements :

Co = αs x Cs + αb x Cb x (1 – αs).

In this example, Cs = Cb = C; αs = α; αb = (1-α), which results in the follow color :
C0 = C x ( 1 - α + α^2);

For α = 0.5, this would be C x 0.75 while the desired result is C x 1.

The proposed "plus-lighter" blend-mode will add the source and backdrop color value : B(Cb, Cs) = min(Cb x αb + Cs x αs, 1). The backdrop is replaced by the result of this blending operation. For the example above this would result in :

Co = min(C x α + C x (1 - α)) = C

This issue is related to the proposal in w3c/csswg-drafts#6464 with the problem referenced in the explainer under cross-fading

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions