Ответ 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.