Safari на iPad отображает фоновый цвет в виде рамки вокруг фонового изображения

Question

Эта ошибка уже обсуждалась здесь , но я пока не нашел ее решения.

В верхней и нижней части моего фонового изображения есть маленькие линии, которые выглядят как фоновый цвет. И высота фонового изображения, и высота контейнера одинаковы (29 пикселей), и изображение не прозрачное, а с белым фоном. На контейнере нет никакой границы, поэтому я немного озадачен. Это выглядит хорошо в Safari на Mac, но показывает вышеупомянутую проблему на iPad.

HTML:

<a class="help" href="#">Help</a>

CSS:

.help {
color: #fff;
display: block;
float: left;
font-size: 12px;
font-weight: bold;
background-image: url(../img/help.png);
background-repeat: no-repeat;
background-color: #ee3224;
height: 29px;
line-height: 29px;
padding: 0 10px 0 26px;
text-transform: uppercase;
position: absolute;
left: 0;
top: 0;
}

Answer 1

Я нашел решение для этого.

Это довольно просто, просто используйте:

background-clip: content-box;
background-size: cover;

где заданы цвет фона и фоновое изображение.

Answer 2

У меня была такая же проблема. Похоже, это разница между тем, как IPad safari вычисляет размер img и размер его контейнера.

Это обсуждается подробнее здесь https://stackoverflow.com/a/6324025/1210282

Решение состоит в том, чтобы добавить контур 1px к вашему изображению, чтобы остановить фоновое кровотечение

Answer 3

Так как у меня есть отступы на поле, где происходит эта ошибка, то, что мне удалось:

background-clip: padding-box;