WesselKroos / youtube-ambilight

This browser extension adds ambient light to YouTube videos
MIT License
87 stars 8 forks source link

Small black line visible on Firefox when using Ambilight with Fullscreen Youtube on 21:9 monitor #238

Closed Violins77 closed 4 months ago

Violins77 commented 4 months ago

Bug description

When Youtube is set to full screen on an Ultrawide (21:9) monitor using Firefox 126.0 (64-bit) and Ambilight, a small but noticeable blackline is visible on the left side of the video between the video itself and ambilight. Disabling hardware acceleration in Firefox solves the issue, but obviously performance is not acceptable. This issue is reported by me because I use ambililight to watch 16:9 video on an ultrawide OLED display and this black bar can lead to burn in of the OLED if used for an extensive period of time.

Steps to reproduce the behavior

Assuming you have Amblight installed and activated to work in Youtube fullscreen on an 21:9 (possibly wider as well, but couldn't test) monitor

1-Go to youtube.com 2-Play a video in fullscreen using ambilight 3-Look on the left side to see the black line

Browser

Firefox

Operating system

Windows

Extension version

2.38.5

The bug still happens in these conditions

Additional context and/or screenshots

image

brutlern commented 4 months ago

I have also noticed this, but it doesn't always happen. For me, it only happens on specific videos, like https://www.youtube.com/watch?v=ZSREFnnUnhI image I think it just might be how the original video is encoded/uploaded. All the videos where I can reproduce the issue are 1080p50. Any other resolution or frame rate and I don't have any black bars. I found the video that the OP posted (please provide link next time) and I don't have the black bars image

P.S: using firefox 126, ambilight 2.38.5, on ultrawide (21:9) screen

WesselKroos commented 4 months ago

I think this is caused by the MPO feature in Windows. This is likely a bug in the graphics card driver.

I had the same issue on an Intel CPU + NVidia GPU laptop in Chromium: https://issues.chromium.org/issues/40228515#c_ts1667004785

This has probably the same cause but for Firefox. You might want to try to disable the hardware overlays for videos flag in Firefox. This disables the MPO feature. (You still retain hardware acceleration this way, but you cannot use Nvidia RTX for example, because it requires MPO. MPO allows the GPU to directly render a video to a rectangle on the screen via the. Previously the browser decided where each video frame would be drawn on screen.)

Violins77 commented 4 months ago

I can confirm that the following setting does not fix it for me:

image

WesselKroos commented 4 months ago

I can confirm it's an overlay issue. I can also still reproduce this bug on my laptop with Intel CPU + NVidia GPU and on my desktop with AMD CPU + NVidia GPU on Firefox when I set gfx.webrender.dcomp-video-yuv-overlay-win to true and restart Firefox. I see a black line below your video https://www.youtube.com/watch?v=ZSREFnnUnhI (Where the line is and if there is a line depends on the size of video element. And the line is gone when I take a screenshot.)

So you might want to try to set the gfx.webrender.dcomp-video-sw-overlay-win and/or gfx.webrender.dcomp-video-hw-overlay-win settings to false and restart Firefox to see if it fixes it. Or any of the other dcomp-video flags.

However, on my desktop with AMD CPU + NVidia GPU I can only reproduce the black line on Firefox, not on Chromium. So there is something different going on with direct video overlays on Firefox.

image

WesselKroos commented 4 months ago

For chromium was already applying a workaround to disable the direct video overlay (MPO). But Firefox seems to need another workaround. I was able to fix the black lines with these css rules:

html[data-ambientlight-enabled="true"] .html5-main-video {
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
}

@Violins77 @brutlern Could you check if this workaround also works for you? Then I can apply this workaround on Firefox in the next update if it works for you as well.

Also: What version of Windows, processor and graphics cards are you using?

Edit: Maybe this is the issue in Firefox 126 https://blogs.nvidia.com/blog/ai-decoded-rtxvideo-firefox Edit 2: No, I also have black lines in Firefox 122 with that flag enabled

Violins77 commented 4 months ago

I confirm that the fix you provided fixes the issue for me. It took ma little while as I'm not too familiar with front end development, but it really does fix it.

Thank you

WesselKroos commented 4 months ago

The "Video artifacts workaround" (advanced) setting is now also available on Firefox and enabled by default to prevent these artifacts from happening: image

WesselKroos commented 4 months ago

@Violins77 @brutlern Are you still having black lines with the "Video artifacts workaround" setting disabled after you update your Windows version to the KB5037853 update? I'm not able to anymore.

You can get the KB5037853 Windows update from Window's the stable update channel. (But you might need to enable the "Get the latest updates as soon as they're available" option and then restart Windows.)

That Window update has solved the checkerboarding bug that was also caused by the direct video overlay, but I can image it could have also solved these black lines.

Edit: I still get it. No idea why it was gone an hour ago.