This article was written in 2013. It might or it might not be outdated. And it could be that the layout breaks. If that’s the case please let me know.
Alpha channel opacity on body background
I like the hsla() colour notation. I like it a lot. It’s easy. First you pick a hue (a colour), then you decide how light or dark it should be, and how saturated the colour must be. And the a stands for alpha channel, which means transparency. I use the alpha channel to create lighter versions of the same colour, or to blend the color with the layer behind it.
There is a fascinating bug in the Windows Phone 7.5 browser. If you use the alpha channel on the background of the body your page turns into web art. Which looks cool, but is completely unusable.
Yes, that’s a picture of this site you’re looking at. That’s what it looked like this morning.
The solution is easy. Don’t use the alpha channel. Or set it to 1. Or convert the colour to a solid hsl() notation, or a completely different notation. The other solution is to set the background of the html element to a solid colour, like #fff.
This takes me back to the days when grey was the default colour for the background and so you always has to set it to something else. Usually ‘#fff’, so it looks like setting a background colour is still a good habit to hold on to.
If I remember correctly there was a bug/feature in Opera where the tab behind the current tab was visible behind the body. Which makes sense on a TV, but not so much on a desktop.
@Egor Kloos: And yes, setting the background colour is still a very good idea.
Was your column in Web Designer Magazine not just that, a call for more art and creativity on the web ? :p
@Tom Hermans: hehehe, yes, it was. But I think the content on this site is more informative than artistic (-:
This is fixed in Windows Phone 8 ( IE10).
What WP7 version are you using?
This was on a WP 7.5 phone. Unfortunately I don’t have a WP8 phone to test on.