

Why does this png display differently in Chrome/Firefox than in Safari/IE? - miorel
http://stackoverflow.com/questions/15858586/what-is-this-witchcraft-firefox-and-chrome-show-a-pear-anything-else-shows-an

======
Centigonal
The the image consists of a checkerboard-style pattern of pixels. The "dark"
pixels form the apple image, while the "light" ones show the pear. The answer
to the SO question suggests that the gamma correction information (which is
used by Chrome and FF, but not by older IE) makes the image darker, blacking
out the apple and revealing the pear. Without gamma correction, the apple is
visible, and the pear becomes a light-colored ghost.

edit: I put together the pieces! yay! :D

~~~
corysama
Hmm... I'm quite familiar with gamma correction. For those who are not, I
recently did an "Explain Like I'm Five"
[http://www.reddit.com/r/explainlikeimfive/comments/1aeuyb/el...](http://www.reddit.com/r/explainlikeimfive/comments/1aeuyb/eli5_linear_workflow/c8xlj9i)

But, my understanding is that for an image displayed 1-1 pixel-to-screen there
is no intermediate math going on. So, there shouldn't be any opportunity for
non-gamma-correct calculations to screw up the output.

Here's a nice example of non-gamma-correct browsers producing incorrect
results after scaling an image: <http://filmicgames.com/archives/354> also
<http://www.4p8.com/eric.brasseur/gamma.html> But, in the SO question there is
no scaling. So, I'm still confused about the difference in visual results
between different applications directly displaying the image...

~~~
Steuard
Even when there's no scaling involved, gamma information embedded in an image
can certainly be meaningful. Among other things, they can be used to correct
for the fact that different OS's or devices can assume different default gamma
factors. Without gamma correction, an image edited on a Mac might look
different when viewed on a PC. If the image can tell the browser what gamma
factor it was designed for, that problem can be avoided.

~~~
corysama
That's exactly what I was forgetting. Different systems assume different
display gammas such as 1.8, 2.2 or sRGB (a mix of 1.0 and 2.4). Thanks!

------
justin_
Using Photoshop I tried to make my own image like this.

<http://i.imgur.com/36EgeOF.png>

It's a mix of Tux and the GNU logo. The strange thing is that Firefox shows
Tux, and Chrome shows the GNU logo. Very strange considering both Firefox and
Chrome show the pear. My understanding is that the GNU logo (the 'lighter'
image) should be shown if the gamma correction is applied. Does anyone know
what's going on here?

EDIT: By removing the iCCP color profile chunk, the image displays properly in
Firefox.

For anyone interested in making one:

First, I put the two images on separate layers in photoshop. I changed the
output levels on Tux to be from 0 to 210, darkening it slightly. I changed the
output levels on the GNU logo to be from 215 to 255, making it very bright.
Then I used a layer mask on the top layer with a grid pattern to mix the two
images. The saved image was a mix of the relatively normal Tux pixels and the
bright GNU pixels.

The final touch was editing the gAMA value in the PNG. Using the free program,
TweakPNG, I set it to something very low, like in the pear image: 0.02. And
that was it!

~~~
CDRdude
Using Firefox, I see a very grainy Tux, and a faded GNU logo in the
background. When I take a screenshot of it using Firefox, and view the
screenshot in Chrome, I see the grainy Tux/faded GNU logo, identical to my
viewing of it in Firefox. Is this how it's supposed to work?

<http://i.imgur.com/hTauClg.jpg> (screenshot of what I see in firefox)

I apologize if this is a dumb question.

~~~
justin_
Firefox SHOULD be showing the GNU logo. For some reason, when a color profile
is included in the image, Firefox ignores the gamma correction information. Or
at least, that's what seems to be happening. Viewing the original image in
Chrome should correctly show the GNU logo.

The reason the screenshot doesn't appear different in Chrome is because no
gamma correction is attached to it.

Anyway, check this new link: <http://i.imgur.com/vYBIZ0R.png>

This is the same image with the color profile removed. It should show the GNU
logo in both Firefox in Chrome, but show Tux in browsers which ignore the
gamma correction.

I apologize if my explanations are confusing... I'm very new to this stuff.

------
joenathan
Even stranger on Windows 8 the thumbnail shows up as an apple but when opened
the Windows Photo Viewer shows it as a pear.

<http://i.minus.com/ilnhPD7qumz9e.PNG>

~~~
hp50g
Good find.

Off topic: how are you finding windows 8?

~~~
joenathan
On my tablet I love it, I have a ThinkPad Tablet 2 and from my extensive
tablet usage(starting with an HP TC1100 running XP, iPad and various Android
tablets) I think it is by far the best tablet OS to get work done on, from
their being no hassle to connect to printers, full USB peripheral support,
compatibility with old x86 apps, quick gestures, and the metro/desktop
multitasking is great. Plus I think IE10 is the best tablet web browser I've
ever used, I wouldn't touch IE on the desktop, Firefox with all my extensions
is my only home.

On my desktop I initially would use the metro stuff here and there but after
few a few months the novelty has worn off and I very rarely venture into the
metro stuff. When used that way Windows 8 is just Windows 7+. I think one of
the greatest things about Windows 8, is the promise of Windows Blue,
Microsoft's commitment to pushing out major upgrades.

In summary, on a tablet Windows 8 is excellent, on a desktop it's at times
between ok to pretty good.

Edit: here is a screenshot from my tablet of some of the printers that I've
connected to in my travels <http://i.minus.com/it1xr6gbOnAFx.png>

~~~
hp50g
Cool. Thanks for your detailed reply - much appreciated. Going to stick it on
my T61 this evening.

------
Steuard
The thing that puzzles me is that the image opens in GIMP showing the apple
(incorrectly, apparently). I would have thought that GIMP would be entirely
aware of embedded color/gamma information like this. (It certainly makes
enough of a fuss about color profiles practically every time I open an image!)
Is the gamma somehow encoded in a less-standard way, or is GIMP just less
clever than I thought?

(My copy of GIMP is a bit outdated, but that shouldn't be a big deal for a
basic feature like this, right?)

------
friendly_chap
I will use this trick on all of my online published images - the IE version
will say:

"GET A REAL BROWSER"

~~~
Sprint
That seems like an abrasive and silly idea to me. Safari and modern IE are
good browsers.

~~~
kyrias
Decent _

------
sankha93
IE10 shows a pear. It became standards complaint or what?

------
shurcooL
This reminded me of an old trick that worked in IE6 or so, where they would
use alternating pixels to take advantage of how selection highlighting worked
in IE6 to make another image appear when you select it.

------
ajtaylor
What was interesting to me was that in Chrome, if you scroll the page you can
see a faint version of the apple until you stop scrolling, at which point all
you see if the pear.

------
eitland
I think this has some _interesting_ applications in spearphishing etc:

You know the Bob Boss uses IE so you send a link to a "specially crafted" web
page that uses an image like this to show the boss a completely smart solution
(place high value object in this location inside vault) and ask him if it is
OK. Now just get Bob to forward the link to the web page to Alise who uses
some other, known web browser and she sees a map with a location outside the
vault.

Just a thought: for now if you own the server anyway you can just do browser
sniffing and send two completely different images..

~~~
CiaranMcNulty
It would be interesting to try the same attack via email attachments, i.e. get
Bob to check an image with a contract, then forward it to Alice saying 'this
is approved' but the wording of her contract is different to the one he read.

------
dclowd9901
When I drag the window, it flickers both.

------
ancarda
Interesting that Chrome (on OS X) displays a pear. I was under the impression
Chrome used Core Graphics which would have exhibited this behaviour too?

Maybe not.

~~~
bla2
Chrome for Mac used to use CoreGraphics, but it switched to Skia because Skia
was a lot faster at drawing stuff. (It still uses CoreText for rasterizing
fonts, and Cocoa for drawing buttons.)

------
mlex
On my Retina monitor (Firefox Nightly), I see a pear but also the apple,
though very faintly. Saving to the desktop gets me an apple, as expected.

~~~
shardling
using ff on a nexus 7 I see the apple and a very faint pear.

------
marcolz
Safari on an iPad mini, first edition, shows an apple (obviously) and very
faintly a pear.

~~~
trishume
I wrote a command line tool to create these images a while ago:
<https://github.com/trishume/doubleVision>

------
yjyft846jh
Reminds me of this question on JPEG images:
[http://stackoverflow.com/questions/3937885/cross-browser-
inc...](http://stackoverflow.com/questions/3937885/cross-browser-
incompatibilities-in-decoding-jpeg-files)

------
baby
I'm using firefox and it glitches when I scroll. So I can see the apple when I
scroll. I doesn't seem like it should be the case.

~~~
theatrus2
Probably an unintentional optimization/side effect of using the GPU for some
drawing path.

Regression tests are fun!

------
tssva
Chrome on Android shows an apple

------
derleth
Reminds me of KOOLEFANT, by Magnus Bodin:

<http://x42.com/koolefant/>

This goes back to the late 1990s; the page mentions MSIE for Solaris.

~~~
skcin7
I miss when webpages used to look like that!

