Проблема со спрайтами

[Zverushka]

http://zverushka.100ms.ru/dantist/

В айпаде и вроде в айфоне - лишняяя полоса - уже и так и сяк, а не могу ее убрать

 

А эта проблема только в сафари. У кнопки установлен transform scale.

Edited April 3, 2014 by Zverushka

[Yazon_Nile]

1 убить зум на странице, через метатег.

2 не использовать спрайты.

3 давать спрайтам дополнительные зазоры. Т.е  паддинг 10пх, а ширина афтера 11пх.

 

Я бы советовал второй способ)

[Zverushka]

@Yazon_Nile,Да, отключение зума помогло с первой проблемой.

Но вообще это странно - тот же зум на пс нормальный - никаких артефактов не вылазит. Может я где-то зазор не оставила? Я даже попытылась сдвинуть задний фон на пиксель вверх, чтобы нормально масштабировалось... но не помогло.

 

2) Спрайты не могу не использовать - например, вот этот волнистый блок даже в сжатом виде весит 700 кб. в пнг. А любое изменение в тексте кнопки - нужно ее рисовать заново.

3) Спрайт у кнопки реализован через абсолютный блок слева и справа, выходящий за границы кнопки. А как иначе реализовать кнопку со спрайтом в ие8? Если спользовать паддинг, то нужно ставить background-clip, которй не пониманимает 8й осел.

Edited April 3, 2014 by Zverushka

[swandev]

@Yazon_Nile,Да, отключение зума помогло с первой проблемой.

Но вообще это странно - тот же зум на пс нормальный - никаких артефактов не вылазит. Может я где-то зазор не оставила? Я даже попытылась сдвинуть задний фон на пиксель вверх, чтобы нормально масштабировалось... но не помогло.

 

2) Спрайты не могу не использовать - например, вот этот волнистый блок даже в сжатом виде весит 700 кб. в пнг. А любое изменение в тексте кнопки - нужно ее рисовать заново.

3) Спрайт у кнопки реализован через абсолютный блок слева и справа, выходящий за границы кнопки. А как иначе реализовать кнопку со спрайтом в ие8? Если спользовать паддинг, то нужно ставить background-clip, которй не пониманимает 8й осел.

Через какой сервис оптимизируешь изображения?

[npofopr]

а зачем у кнопки аж 3 картинки? кнопки делаются всего 2мя обычно. Левая часть и правая. И все.

[Zverushka]

@npofopr, кажется ты прав, это анахронизм остался после того, как каждый кусок спрайта кнопки был на новой строке. 

[ryter]

css3  для нормальных браузеров картинки для старых ие)) 

[Zverushka]

@ryter, ну и как ты эту кнопку нарисуешь на css? Особенно интересует тень в разные стороны внизу кнопки.

[Yazon_Nile]

css3 transform такое может.

[ryter]

@ryter, ну и как ты эту кнопку нарисуешь на css? Особенно интересует тень в разные стороны внизу кнопки.

дай оригинал картинки кнопки на прозрачном фоне сделаю. ну или в скайп(в профиле) скинь.

[ryter]

http://jsfiddle.net/ryter/nxV94/ ну может почти 

[Zverushka]

@ryter, премного благодарю за попощь на css. Если б ты не твой совет и пример. сидеть бы мне сейчас возиться в фотошопе. После того, как мне этот сайт отдали с готовыми спрайтами, где каждый кнопка была прорисована вместе с текстом - меня переклинило и я тоже зачем-то делала спрайтами, только без текста уже, чтобы можно было вручную писать. Сколько времени уходило на склеивание нескольких видов кнопок - брррр. Лучше лишний вложенный див, чем эта ситуаевина со спрайтами :0).

Edited April 15, 2014 by Zverushka