search

proginosko / LeechBlockNG

LeechBlock NG (Next Generation) for Firefox is a simple productivity tool designed to block those time-wasting sites that can suck the life out of your working day. All you need to do is specify which sites to block and when to block them.
https://www.proginosko.com/leechblock/
Mozilla Public License 2.0
712 stars 65 forks source link

Grayscale filter breaks fullscreen video/youtube #132

Open mon opened 4 years ago

mon commented 4 years ago

Fullscreen videos are made completely black, subscription bar goes away for some reason.

I really don't know what kind of convoluted CSS youtube is using that causes this. I do have a potential solution, but it might need a little performance testing to make sure it's a good solution.

Instead of the filter, I did this to great effect:

body::before {
  content: '';
  background-color: black;
  mix-blend-mode: saturation;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2147483647;
  pointer-events: none;
}

The mix-blend-mode being the key here, as saturation with a B&W mask will turn the children grayscale.

The main reason this isn't a PR is because height:100% isn't sufficient once you scroll the viewport, and my CSS isn't good enough to get the element to cover the entire page.

jruiz94 commented 2 years ago

This also happens on reddit, not with videos but i cannot scroll if i have grayscale activated