search

mapbox / mapbox-gl-js

Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL
https://docs.mapbox.com/mapbox-gl-js/
Other
11.17k stars 2.22k forks source link

Half-transparent webm videos are not rendered correctly in Chrome. #12662

Open SiggyF opened 1 year ago

SiggyF commented 1 year ago

mapbox-gl-js version: 2.14.1

browser: Chrome 112.0.5615.49

Steps to Trigger Behavior

  1. Add a video with an alpha channel and add it as a video source in debug folder.
  2. Change the video source of the test video to the test video.

Link to Demonstration

https://codepen.io/SiggyF/pen/jOeqRZO

Expected Behavior

Video should show aliased transparent circles. All colored rectangles should be half transparent

Actual Behavior

Video shows inconsistent transparency (black colours are transparent, white is opaque). Transparency flickers while moving (both in Firefox as in Chrome).

It might be related to #2216, which was a browser issue.

Incorrect display in Chrome

Screenshot 2023-04-16 at 15 44 15

Correct display in Firefox (while not moving)

Screenshot 2023-04-16 at 15 44 20
SiggyF commented 1 year ago

Versions up to 0.49 gave the correct result in chrome.

SiggyF commented 1 year ago

I would be happy to dig into the code to find a solution. I could need some advice on the best approach to debug the shaders. I assume it is an issue with pre-multiplying alpha in the image source / raster layer code. It could possibly be caused by the reuse of a framebuffer or a missing clear of the canvas. A bug in Chrome is also a plausible cause, but the older version 0.49 did work, so that would not be my first approach.

I did see the contributor docs and found the debug pages that I could test this issue with.