after-dark-css icon indicating copy to clipboard operation
after-dark-css copied to clipboard

Some screensavers have issues on ultrawide screen resolutions

Open dekimsey opened this issue 4 years ago • 3 comments

Super neat project. I just happened to notice these issues when I was checking it out on my 3440x1440p monitor.

For instance the Spotlight screensaver, when the spotlight reaches one of the far ends of the screen, the black overlay is not of sufficient size to cover the opposite side: image

Rainstorm, the effects are left-aligned and do not reach the right side of the screen. The "flash" does however. image

dekimsey avatar Jul 31 '21 18:07 dekimsey

Good callout! I don't have an ultrawide monitor but I see the same effect when I zoom out a bunch in the browser, so we can use that to reproduce and fix it. 👍

bryanbraun avatar Jul 31 '21 20:07 bryanbraun

changing CSS directives that use px to use percentages instead could be a way to solve this

Lana-chan avatar Oct 10 '21 05:10 Lana-chan

One issue with these demos is the reliance on fixed-size transparent PNGs. I think converting them to SVGs would allow us to support percentages.

In the case of the spotlight one, we can likely bypass the transparent PNG entirely by animating a CSS clip-path, as described here: https://css-tricks.com/clipping-masking-css/#animating-transitioning-clip-path

bryanbraun avatar Oct 11 '21 01:10 bryanbraun