Ipad показывает мои изображения спрайт неправильно

Question

Мне интересно, если это что-то несколько проще, но у меня проблема только на iPad с моими sprited изображениями. У меня есть тег, для которого я использую спрайт, чтобы отобразить изображение звезды (аналогично gmail или picasa) для обозначения избранного. В любом другом браузере (включая сафари) на компьютере все нормально.

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

Это какая-то проблема с увеличением или настройкой области просмотра специально для iPad? Это сводит меня с ума, и все, что я делаю, чтобы исправить это, отрезает часть изображения и портит нормальный внешний вид браузера.

Вот пример того, что я имею в виду, так как не могу открыть страницу, над которой я сейчас работаю. На этом сайте, над которым я работал в прошлом, параметры просмотра на iPad выглядят странно: http://demo.qlikview.com/index.aspx?section=Life Например, опция просмотра «Скачать» в приложении FEMA выглядит иначе, чем в приложении Kick It, поэтому она даже не выглядит согласованной.

Любая помощь будет оценена. Спасибо!

Answer 1

Это потому, что iPad масштабирует вашу страницу.

Размер вашего элемента, в котором используется спрайт, масштабируется, а изображение спрайта увеличивается. Но, похоже, не ведет себя точно.

То же самое происходит, когда вы уменьшаете масштаб в сафари. Это связано с тем, что изображение в браузере масштабируется не так, как элемент dom. Элемент dom отображается как векторный объект. Поэтому, когда вы увеличиваете или уменьшаете масштаб, линии остаются резкими. Когда вы делаете то же самое с растровым изображением. Он становится размытым, и браузеру нужно угадать, как изображение будет выглядеть меньше или больше.

У вас есть два варианта:

1. используйте больше места между спрайтами.
2. используйте в своем CSS EM, а не Pixels

PS: не используйте! Важный в вашем CSS

Answer 2

Как указывало meo, лучшим вариантом будет оставить пробел между спрайтами .

Есть еще одна последняя вещь, которую вы можете сделать, это , чтобы не позволить пользователю увеличить веб-страницу , добавив следующую строку в ваш тег. Это выглядело бы точно так же, как вы просматриваете в браузере, что довольно неплохо, если в iPad загружено множество элементов из-за спрайта.

<meta name="viewport" content="minimum-scale=1.0, maximum-scale=1.0" />

Удачи!

Answer 3

Я тоже столкнулся с этой проблемой. Я оставляю дополнительное пространство между своими спрайтами с тех пор, как впервые заметил недостатки iPad. Тем не менее, мой текущий проект включал спрайты и еще один элемент с преобразованиями CSS3. Комбинация сделала спрайты расплывчатыми, со странными обрезками по краям. На самом деле я нашел исправление на Нет больше неровных краев в iOS . Попробуйте применить следующий CSS к вашим спрайтам:

/* IOS fix for incorrectly scaled sprites */
-webkit-background-clip:padding-box;
background-clip:padding-box;

Эти несколько строк работали волшебно в моем проекте. Конечно, YMMV.

Answer 4

Что я обычно делаю, это просто определяю отдельные изображения (не спрайтовые) для пользователей iPad. Я знаю, что он загружается не так быстро, как вы надеетесь, с изображениями, написанными на сприте, но я чувствую, что они должны заплатить такую ​​цену. Я использую отдельные изображения на сервере с @media в таблице стилей для определения различных изображений для браузеров iPad. Краткий обзор того, как использовать @media для iPad, можно найти по адресу:

http://css -tricks.com / сниппеты / CSS / Ipad-Specific-CSS /

Answer 5

Самое простое решение для этого - обвести контур вокруг вашей злобы таким же образом, как и цвет рамки родительского контейнера.Контур находится вне вашего элемента и не влияет на макет.То, что вы видите, - это проблема, с которой сталкивается мобильный Webkit, когда он масштабирует изображения с помощью фона или фоновых изображений, они выходят из контейнера.Контур будет располагаться поверх этого и накрывать его.