Android gradient screenshot madness

Another fine day at the QuirksMode take a look at labs, wherever we have a tendency to take a look at browsers therefore you don’t need to. Today’s topic is CSS gradients, and therefore the refined ways that during which the assorted mechanical man devices fuck them up. Also, the not-so-subtle ways that during which mechanical man devices fail screenshots of aforementioned gradients.

It seems that there square measure variations between gradients on the assorted mechanical man devices. this is often not a browser factor, however associate actual device factor. I compared constant gradient take a look at on totally different mechanical man devices in Firefox, mechanical man WebKit, and Chrome, and located constant variations between the browsers. It became obvious that there square measure incompatibilities between these Androids’ graphical … thingies, which browsers don’t (can’t?) work around them.

So i assumed I’d write a snarky post embellished with some screenshots. it absolutely was once I had created those screenshots that the opposite shoe dropped: the screenshots show totally different gradients than the screen. In different words, mechanical man screenshots can’t be sure to indicate refined browser variations. Actual external footage enamored a camera square measure obligatory.

This is all therefore marvelous. No marvel I can’t quit smoking.

Show, don’t tell

Compare the subsequent 2 footage and reflect the variations. each show the primary take a look at on this page in Chrome thirty-nine for mechanical man on the Sony Xperia S.

The first one may be a screenshot enamored the Xperia itself. It shows the more-or-less correct gradient. However, it doesn’t truly match what the device shows on-screen.

The second is enamored associate external camera. It shows what I see on-screen, and it’s clear that the gradient is subtly totally different from the one within the screenshot. The yellow doesn’t type a slim band, and therefore the gradient from red to orange takes a lot of less area.

The first image matches what I see in desktop browsers and most different mechanical man devices. The second image matches what Xperia users can truly see. what proportion of a haul this is often depends on the site’s graphic style and therefore the precise gradients you employ, however it’s a haul you ought to bear in mind of.

One more for the road

Hell, let’s do another one. Here is that the same legal action, once more in Chrome thirty-nine, however currently on the LG L5. 1st the screenshot, then the external camera.

Again, there’s a refined distinction between the gradients, tho’ it’s less pronounced than with the Xperia. Again, the screenshot matches the opposite browsers far better than what’s truly on the screen.

What’s going on?

It looks clear that the screenshot app uses a unique graphical … thingy than the screen and/or browser. The screenshot app gets the right gradients, whereas the browser window on the screen doesn’t. Again, this is often a tool downside, and not a browser downside. Firefox, mechanical man WebKit, and Chrome show roughly constant gradient on every device, and therefore the same variations from device to device.

Now if you’ll excuse American state I’ll go and drink myself into a stupor.

Update: The agreement among those that commented on this text is that the device’s screens square measure badly graduated. to this point it looks LG and Sony square measure affected, however Samsung and HTC aren’t.

The fundamental issue is that a selected RGBA color price appearance {different|totally totally different|completely different} on different physical displays, however the screen buffer is generated while not taking into consideration the properties of the show.