Как убрать белую полосу под псевдоэлеменотм на мобильных устройствах?

Question

[zyulev]

Все перепробывал, помогите

#bottom_btn:after {
content: "";
width: 100%;
height: 20px;
display: block;
background-size: 32px 16px;
background-image: url(img/teeth.png);
position: absolute;
bottom: -5px;
z-index: 999;
outline: none;
}

сверху и снизу над звубчиками на мобилке появляются полоски

Answer 1

[Андрей Федоров]

Как вариант у вас высота самого блока не pixel perfect, т.е. задана в относительных единицах и приходиться на середину пикселя...

Comments

[zyulev]

в px задана высота у самого блока

[Андрей Федоров]

zyulev: а позиционирование?

[zyulev]

у after абсолютное, у блока relative

[Андрей Федоров]

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

[zyulev]

demo.kassa5.ru/service

[Андрей Федоров]

zyulev: у вас съезжает background-position вниз на 1 или меньше px. почему так - смотрите свой код... у :after

[Андрей Федоров]

zyulev: возможно стоит просто добавить в img/teeth.png прозрачную границу сверху и белую снизу...

[zyulev]

Андрей Федоров: не помогло

[Андрей Федоров]

zyulev: добавьте для :after background-repeat: repeat-x;

[zyulev]

Андрей Федоров: так было изначально, все равно полоса есть

[Андрей Федоров]

zyulev: У вас эта полоса появляется из-то того, что текстура с прозрачностью начинает заливать область не с позиции 0, 0. Соответственно ее надо заставить заливать область правильно. background-position: 0 0; попробуйте. Я не могу тесты провести, это только вы можете.

[zyulev]

Андрей Федоров: все равно полоска, с сафари на ios нету ее