CSS спрайты перепутались на iphone

Question

Я заметил, что css-спрайты, похоже, показывают на 1 пиксель больше, чем они должны видеть при просмотре на iphone. Мой сайт прекрасно работает во всех основных настольных браузерах на Mac и ПК. Но когда я смотрю его на iphone, вы видите 1 пиксель смежного изображения спрайта.

Кто-нибудь сталкивался с этим раньше? Любые предложения о том, как это исправить? Я знаю, что могу просто изменить все свои спрайты, чтобы разделить их между собой, но есть ли более простой способ?

ОБНОВЛЕНИЕ: протестировано масштабирование с помощью safari и обнаружено, что точно такая же проблема возникает при определенных уровнях масштабирования в настольном сафари

Answer 1

Лучше поздно, чем никогда:

Это не ошибка или программный недостаток, это простая математика: (старый) iPhone отображает веб-сайты с шириной 980 пикселей на экране шириной 320 пикселей (в портретном режиме).

Итак, проблема округления: допустим, элемент имеет ширину 50 пикселей. Он отображается примерно на треть от его размера, и это вызывает проблему: iPhone будет отображать его с шириной 16 или 17 пикселей. Даже если бы это была ровно одна треть, проблема осталась бы, и то же самое относится, конечно, к различным уровням масштабирования.

Если это 16px, вы в порядке - вы, вероятно, заметили, что проблема возникает не на всех ваших элементах. Если это 17px, это означает, что элемент отображается немного больше, чем предполагалось, и появится соседний спрайт.

Я проверил apple.om на iPhone 3G, и даже на их панели навигации внизу видны странные маленькие артефакты - они едва заметны.

Так что в теории этого должно быть достаточно, чтобы добавить 1px вокруг каждого спрайта. Необходимость изменить все эти элементы - облом, но, похоже, это лучшее решение. Проблема вряд ли исчезнет - iPhone 4, очевидно, все еще уменьшает масштаб, по крайней мере, в портретном режиме. Не говоря уже о всех других смартфонах с гораздо худшими экранами.

Answer 2

Добавьте еще 1 пиксель между значками.

.: редактирование:.

Только что заметил, что это было одно из предложенных вами решений. Проверьте элементы со спрайтом и убедитесь, что они имеют правильный размер. (Дважды проверьте визуализированную модель рамки в Firebug).

Это может быть связано с тем, как мобильный телефон отображает элементы.