astro-pi / beta-testing

Bug tracker for the Trinket Sense HAT emulator
https://trinket.io/sense-hat
3 stars 0 forks source link

Off vs White LED colour contrast #16

Closed davidhoness closed 8 years ago

davidhoness commented 8 years ago

I've noticed on Epiphany, but it may also occur on other browsers, a lack of contrast between white LEDs and ones that are turned off. Screen shot from Epiphany below;

2016-07-20-084810_1920x1080_scrot

And here's one from Fire Fox on Ubuntu.

screenshot from 2016-07-20 09 47 56

grega commented 8 years ago

The same contrast issue is present on Firefox 47 (Mac):

firefox

vs. Chrome 51 (Mac):

chrome
davidhoness commented 8 years ago

I'm wondering if this is to do with the Edge-style SVG rendering fix that went into the last build.

eah13 commented 8 years ago

Looking in to this. It's not related to the Edge-style SVG rendering per se but rather browsers not rendering the SVG's off-state correctly (there's transparency in the offstate that gets combined incorrectly). If we can test for lack of support for the rendering we use we could insert a darker fallback fill as the LED offstate for those machines.

That said, I'm very surprised that Firefox 47 for Mac is showing this behavior- will grab a mac and investigate.

eah13 commented 8 years ago

This should be fixed! While I was in there I cleaned everything up, darkened the offstate for all browsers and fine-tuned the SVG.

Before (Chrome): screenshot 2016-07-26 at 3 33 45 pm

After (Chrome): screenshot 2016-07-26 at 3 35 21 pm

Special thanks to @grega for the Firefox screenshot. I wasn't able to replicate in FF, but I did figure out that that screenshot could be reproduced by ignoring the opacities of some elements so I rewrote it to not use opacity at all in the offstate. This may speed things up a tiny bit in Epiphany too.

Definitely an improvement, so thanks again for the suggestions! The colors really pop on the new darker background. Give it a look and let me know what you think.

Closing for now. If there are any other problems related to this after a refresh please comment here.