mix-blend-mode=plus-lighter with partial transparency completely removes elements behind it #425

New issue

Open

opened 2023-11-07 02:33:29 -06:00 by FugiTech · 1 comment

FugiTech commented

2023-11-07 02:33:29 -06:00

(Migrated from github.com)

Operating System Info

Windows 11

Other OS

No response

OBS Studio Version

29.1.3

OBS Studio Version (Other)

No response

OBS Studio Log URL

N/A

OBS Studio Crash Log URL

N/A

Expected Behavior

If you create a browser source that contains two elements that should crossfade into eachother (using linear opacity transitions and mix-blend-mode=plus-lighter), then swapping the opacity should result in the two elements doing a crossfade transition.

A minimal example is provided at https://codepen.io/fugiman/pen/mdvRGMm

I have confirmed this works in Chrome v118 and Chromium v103 (which I believe is what the CEF in OBS 29.1.3 is forked from)

Current Behavior

Instead, on OBS 29.1.3 the bottom element will completely disappear during the transition, and the top element will blend with the background. At the end of the transition the bottom element will snap in at the correct opacity.

In other words, if you are transitioning from bottom -> top, bottom will immediately disappear and top will fade in slowly, ending with top fully visible
transitioning from top -> bottom, top will slowly fade away, and then at the end bottom will snap in completely visible.

Steps to Reproduce

Load https://codepen.io/fugiman/pen/mdvRGMm in Chromium 103 (or Chrome 119) and see the expected behavior
Load in OBS 29.1.3 browser source and see the blue square disappearing

Anything else we should know?

No response

### Operating System Info Windows 11 ### Other OS _No response_ ### OBS Studio Version 29.1.3 ### OBS Studio Version (Other) _No response_ ### OBS Studio Log URL N/A ### OBS Studio Crash Log URL N/A ### Expected Behavior If you create a browser source that contains two elements that should crossfade into eachother (using linear opacity transitions and mix-blend-mode=plus-lighter), then swapping the opacity should result in the two elements doing a crossfade transition. A minimal example is provided at https://codepen.io/fugiman/pen/mdvRGMm I have confirmed this works in Chrome v118 and Chromium v103 (which I believe is what the CEF in OBS 29.1.3 is forked from) ### Current Behavior Instead, on OBS 29.1.3 the bottom element will completely disappear during the transition, and the top element will blend with the background. At the end of the transition the bottom element will snap in at the correct opacity. In other words, if you are transitioning from bottom -> top, bottom will immediately disappear and top will fade in slowly, ending with top fully visible transitioning from top -> bottom, top will slowly fade away, and then at the end bottom will snap in completely visible. ### Steps to Reproduce 1. Load https://codepen.io/fugiman/pen/mdvRGMm in Chromium 103 (or Chrome 119) and see the expected behavior 2. Load in OBS 29.1.3 browser source and see the blue square disappearing ### Anything else we should know? _No response_

WizardCM commented

2023-11-07 06:56:16 -06:00

(Migrated from github.com)

I can confirm the issue, but I don't know if it's something we can fix.

No milestone

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

gh-obsproject/obs-browser#425

No description provided.

Rows
Columns