transparent pixel renders different on PC and iPhone

Question

Generated transparent pixel in Photoshop.

On PC it looks like expected, on iPhone it looks darker.

div {
    background-image: url('/images/pixel-white.png');
}

Browsers:

PC - Chrome version 22.0.1229.96 m

iPhone - 21.0.1180.82

Pixel: PNG-24 / Transparency layer: rgb 255 255 255, transparency 60%

Question: How to make this pixel to look same on PC, iPhone and all other browsers?

Addition:

enter image description here

What do you mean, "darker?" What's behind the transparent pixel? — Matt Ball, Oct 27 '12 at 14:04
Just for the record, that's not "darker" it's "more transparent". — Madara's Ghost, Oct 27 '12 at 14:30
Transparency calculations depend on display settings. Please add the settings of those two different displays to your question so it's more clear what is causing your issue. — hakre, Oct 27 '12 at 14:31
Related: http://stackoverflow.com/questions/1374618/alpha-transparent-pngs-not-displaying-correctly-in-mobile-safari — Adam Lear, Dec 25 '12 at 21:11

score 3 · Answer 1 · answered Oct 27 '12 at 14:05

3

There should be a very special reason you're not just using:

background: rgba(255,255,255,0.6);

Or something similar.

(That's not a comment, use rgba.)

answered Oct 27 '12 at 14:05

Madara's Ghost

172,118
50
264
308

score 2 · Answer 2 · answered Oct 27 '12 at 14:14

2

How to make this pixel to look same on PC and iPhone?

You can't. Not only does it depend on the browser, but also on the operating system and the display device as well as how the user using a device is configuring the display.

That are things you can not control from within the image nor the server-side, especially as you're trying to compare different computer systems here.

answered Oct 27 '12 at 14:14

hakre

193,403
52
435
836

How can user of an iPhone configure his display? – Alex G Oct 27 '12 at 14:15
As the PC user can do that, it doesn't depend if the iPhone user can do it, too. But I'm sure she can anyway. Also only you don't like the answer, there is no reason to downvote it. Maybe you should make yourself more comfortable with digital color *models*. – hakre Oct 27 '12 at 14:16
We assume, that all display settings of PC and iPhone are default. – Alex G Oct 27 '12 at 14:18
Yes these devices *are different* by default. That is *why* you see that differently. – hakre Oct 27 '12 at 14:18

score 0 · Accepted Answer · edited May 23 '17 at 12:12

To achieve 100% compatibility with all browsers (IE6+), I've used recommendation from the following post:

Alpha transparent PNGs not displaying correctly in Mobile Safari

Even though the above topic is dedicated to the Mobile Safari browser ONLY - I confirm that the practice of settings transparent pixel to more than 1px of width/height is solving the issue with inconsistent look for all major browsers (IE6+).

In other words, your transparent pixel needs to be at least 2px wide/high to look like expected in all browsers as per PNG's RFC: http://www.ietf.org/rfc/rfc2083.txt.

transparent pixel renders different on PC and iPhone

3 Answers3

Linked