Some screensavers have issues on ultrawide screen resolutions
dekimsey opened this issue · 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:
Rainstorm, the effects are left-aligned and do not reach the right side of the screen. The "flash" does however.
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. 👍
changing CSS directives that use px to use percentages instead could be a way to solve this
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