Альфа-прозрачные PNG файлы, которые не отображаются правильно в Mobile Safari

Я использую некоторые полупрозрачные PNG в качестве фоновых изображений на разных сайтах. Обычно это что-то вроде изображения 1x1 с 30-процентным непрозрачным белым слоем.

Я заметил, что Mobile Safari не отображает их правильно, придавая им более темный/сероватый оттенок.

Является ли это ошибкой MobileSafari (я так не представляю), или мне нужно делать что-то другое, как на мои страницы, так и на PNG?

(Здесь, как я создаю PNG: в Photoshop создайте прозрачный холст 1x1. Нарисуйте белый прямоугольник в слое 1. Установите непрозрачность, скажем, на 30 процентов, Save for Web как 24-битный PNG с прозрачностью.)

Ответ 1

Я пытался сделать некоторые простые фон DIV, используя 1 пиксельный PNG с частичной прозрачностью, чтобы сделать полупрозрачный блок для некоторого текста над фоновым изображением. Он отлично смотрелся во всех браузерах, пока я не попробовал iPhone. Он выполнял частичную прозрачность, но с этим нечетным сероватым оттенком вы говорите вместо ожидаемых результатов.

Затем я попробовал те связанные красно-голубые тесты. Они оба отлично выглядели в первый раз, когда я их просматривал, а затем, нажав на обновление, заставили их пойти greyish! Я попробовал снова с новым окном браузера, и он вернулся к тому, чтобы выглядеть правильно, а также несогласованность, которую вы упомянули о забастовках снова. Ну, тогда я просто физически повернул iPhone, и, когда он перешел от пейзажного к портретному режиму, цвета переместились в сероватые версии!

Все частичные проверки прозрачности PNG для W3C выглядели идеально на iPhone. Однако он не прошел тест Гамма. После исключения гаммы в качестве возможной причины я охотился на это один на несколько часов, но не получил никуда. Я даже сделал свой собственный градиент, который прошел весь путь от 0 до 100% прозрачным, чтобы убедиться, что это не мой процесс создания изображения. Конечно, это сработало отлично, поэтому мой процесс хорош.

Тогда у меня был этот гениальный ход, что, если файл был больше 1 пикселя? Таким образом, я сделал его шириной в 2 пикселя и высотой 1 пиксель, 20% прозрачной (альфа 80%). Бам... это сработало! Я пробовал всевозможные комбинации 1x1, 1x2, 2x1, 2x2, 8x8. Все они работали правильно, за исключением одиночной версии.

Я вернулся и проверил вышеуказанные связанные тесты и увидел, что они используют 1 пиксельные изображения для всех оттенков. Ах, ха!

И там у вас есть, Для мобильных Safari требуется как минимум 2 пикселя для работы с полупрозрачными файлами PNG.

Ответ 2

Используйте изображение с любыми измерениями, отличными от 1x1.

(Сокращенный ответ для тех, у кого есть что делать)

Ответ 3

После просмотра сайтов на обоих устройствах (мой Mac и мой iPod Touch), я думаю, что вы видите здесь разницу в том, какие цвета могут отображать экраны, а не как ошибка в механизме рендеринга. Есть много факторов, которые могут входить в такую разницу, например, контраст в портативном дисплее может быть не таким большим, чтобы сэкономить энергию, сделать устройство более дешевым и т.д.