I'm writing a CSS book

JavaScript archives Compatibility CSS coaching Thidrekssaga QuirksBlog Donations Politics Mobile About COH

sitemapcontact

Gradients (and screenshots) update

Just now I published the retests of the CSS Images and replaced content spec, which includes gradients. It was during these tests yesterday that I discovered Android screenshots aren’t always trustworthy, and meanwhile I’ve got enough information for an update.

Many people advised me to take a screenshot of the screenshot. I did, and it shows the original screenshot correctly instead of repeating the problem. So this avenue of research does not lead anywhere.

The screenshot problem

The vast majority of commenters agrees that the screenshot problem is caused by incorrect calibration of the device screen; that is, the correct gradient RGBA colour values the browser passes on to the OS cannot be processed correctly, and as a result the colours as shown on the screen are incorrect. However, the screenshot app gets its data directly from the browser, and thus shows the correct colours.

Meta-screenshots - no go

The most often-repeated advice I got was to take a screenshot of the published screenshot and see what happens. Apparently the expectation was that this meta-screenshot would have the same problems as the original gradient. That turns out not to be the case.

Here is my first ever meta-screenshot, taken with the Sony Xperia S of yesterday’s screenshots. For comparison I also repeat the original screenshot.

I don’t see a lot of difference in the gradient, and the conclusion must be that the Xperia handles the image correctly, and does not repeat the original calibration problems here. So this research angle leads nowhere.

Affected devices

The final question is which devices are actually incorrectly calibrated. I went through all of my devices that have a browser capable of showing gradients, sent them to the test page, and the results are in the table below:

It turns out that most devices actually properly calibrate their screens; the only exceptions being the LG L5, Xperia S, and the Flame (the Firefox OS reference device). So this problem may not be as huge as I initially thought.

Other gradient notes

The rest of the tests was fairly uneventful. It turns out that all desktop browsers now support the new syntax, and Safari iOS and Chrome Android do as well. The other WebKit-based browsers still require middle syntax. Interesting, but expected.

Also, it turns out that IE has a bug when you define linear gradients with angle keywords in a non-square box. The IE team has meanwhile confirmed the bug and is working on an update. Compare this page in IE and any other browser, and pay close attention to the red. A corner of each element should show full red, but in IE that doesn’t happen. Below you see screenshots; IE left, Chrome right.

Finally, Firefox now supports image-orientation. The other browsers don’t.

Anyway, this was an eventful retest. I hope my next one is nice and boring.