Strange colors/blue-fringed mouse pointer on full-screen YouTube when f.lux is active

yanzitommy

This post is deleted!

chris-l

I worked around this by creating a file named safari.css, a text file with these contents:

.ytp-fullscreen video {
  opacity: 0.996 !important;
}

Then in Safari preferences > Advanced, you select that file for the Style sheet setting.

If you want to experiment, every time you edit & save that file, you have to reset the Safari preference back to None Selected and then back to your file.

chris-l

My solution might reduce battery life a bit, hopefully it's not noticeable.

chris-l

You could add Netflix to it if you want:

.ytp-fullscreen video, #netflix-player.player-cinema-mode video {
  opacity: 0.996 !important;
}

shinz4u

@chris-l

Hi, is there such a preference in chrome for mac that I can change to get a similar solution?

Thanks a lot

chris-l

@shinz4u Sorry, not sure about Chrome. There are probably extensions available that let you add your own CSS rules, but I haven't looked into it. I might publish my own extensions to make it easier for everyone.

I actually am not using f.lux at the moment, but I calibrated my laptop display with a lower color temperature than normal, and it has the same bug that you get with f.lux -- videos have artifacts in the brightest parts, but only when they are full screen with nothing else composited on top of them. Maybe the video driver uses an optimization for this case that doesn't quite work.

erikfrisk

@shinz4u I just figured it out in Chrome. Thanks @chris-l for the fix! This thing was driving me nuts.

Quick guide for web devs: Just add opacity: 0.996 !important; to the HTML5 video element in Chrome's developer tools.

Detailed steps for non web devs:

Open a tab with the Netflix video you want to watch (haven't tried with YouTube, but same principle should apply).
Open Developer Tools by going to View > Developer > Developer Tools (or by hitting alt+cmd+i).
Click the button with the "arrow pointing into a box" at the very top left of the Developer Tools window to "inspect an element" (or hit cmd+shift+c).
Click the Netflix video element to inspect it. This should bring up the Elements tab in the Developer Tools window with the "video" element selected.
At the top right of the Developer Tools window, you should see a little section that says "element.style" with a few list items underneath. Click the bottom of that section and add opacity: 0.996 !important; as a new list item.
Go full screen and watch a beautifully artifact-free video.

You'll have to do this every time you open a new video in Chrome, but it only takes a few seconds. I'm sure it can be done more permanently with an extension, as @chris-l said though.

PS: Thanks to the f.lux team for a great piece of software! It's a lifesaver. I know this bug isn't your fault.

Lojesad

I'm even having this problem with the new update. Before everything was working fine, now i start seeing some difference on the white color when i'm full screen on youtube. After all the buttons hides, the color white become strange.
I'm using MacBook Pro Mid 2015, Intel Iris Pro 1536 MB

chris-l

Here, you can try this as a Chrome extension.

https://chrome.google.com/webstore/detail/videofixer-for-flux/gmkeppffdejhpppfnbgakglpoeaobhhh

I submitted one for Safari but they have to approve it. (Or reject it!) But if you know what you're doing the source code is here. https://github.com/clundie/VideoFixer

herf

@chris-l wow this is awesome - thank you!

herf

Added to the FAQ:
https://justgetflux.com/faq.html?q=videofixer

ik...

@herf where can I get older versions of f.lux? I didn't have this problem before I updated it.

ik...

@herf don't mind that, it seems to appear after Chrome is updated.

ik...

Whatever this is, I don't have this problem in the incognito mode, Safari and another user's Chrome. But the Chrome I use have this color artefacts.

The above css fixed that. For anyone who's concerned about the reduced opacity I'd recommend using box-shadow, which is what I did with the Stylebot extension. Tested only on youtube.

.ytp-fullscreen video, #netflix-player.player-cinema-mode video {
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0) !important;
}

@chris-l I think it's better to use box-shadow in your extensions as well.

ik...

This post is deleted!

chris-l

Thanks for the feedback, I will try to look into energy usage & see it it makes a difference. Also I should point out that the browser extension is applying the style to all videos, not just YouTube & Netflix. In future I might make it more specific again, though it does mean we would have to deal with changes to web site designs that break it.

Nirvanes

Now Safari is just fine but Chrome isn't lol

Safari has noa artifact whatsoever since I updated to Safari 10.

Is it just me?

llamafilm

@chris-l thanks for the extensions! Does this apply to all videos, or only full-screen playback? I haven't tried it yet, but I think lowering the opacity would have some undesired effect on the color and contrast, no?

mixolyd

@Nirvanes said:

Now Safari is just fine but Chrome isn't lol

Safari has noa artifact whatsoever since I updated to Safari 10.

Is it just me?

Have you tried Netflix? Youtube seems to be a lot better but I definitely still get artifacts with Netflix.

@chris-l The Chrome extension definitely works. Youtube looks absolutely fine. Thank you!

chris-l

Thanks for the feedback. Yes the extension is applying to all videos, full screen or not. The opacity is only reduced by the smallest possible amount, so I would hope it has minimal to no perceptible effect. (Only 0.4% of the background color will be blended into the video). But yes there are other ways I could try -- like the box-shadow rule that was mention earlier. I think what we are doing is forcing the browser to render the video in a way that doesn't trigger the bug. Probably there are a bunch of ways to do it.