Background makes text hard to read in Firefox
Closed this issue · 6 comments
Some background effect is not applied properly on Firefox (FF 52.0.2, Windows 10), making the text very hard to read.
Screenshot:
Looks normal on Chrome on the same machine.
Odd, I can't seem to reproduce it on the same Firefox version. Perhaps it's a Windows-specific problem, in which case I probably cannot fix this myself.
I was able to work around it by changing the background-image to:
linear-gradient(to right, rgba(204, 200, 177, 1.0) 1px, rgba(204, 200, 177, 0.0) 1px),
linear-gradient(to bottom, rgba(204, 200, 177, 1.0) 1px, rgba(204, 200, 177, 0.0) 1px)
This leads me to believe that the issue is that Firefox on Windows (maybe only under certain GPUs?) isn't using pre-multiplied alpha during compositing. So if the gradients aren't pixel perfect, you get a darkened blending artifact.
Changing background-size to be px-based instead of rem-based also makes the issue go away as long as the zoom level is 100%.
Ah, that makes sense. Would you mind opening a PR for that?
I could try making a PR, but I don't know Styl and have no way of building the CSS to see if it works. I was just playing around in the Firefox Developer tools...
Ok no problem -- leave it to me :) I just thought you had everything set up already, and PRs are the best way to give a contributor the credit they deserve.
Mind testing out the fix-ff-bg branch for #3? Opening the index.html should suffice.