При масштабировании в Chrome изображение спрайта становится несоосным

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

Здесь CSS.

.feature-icon {
    height: 22px; 
    width: 22px;
    display: inline-block;
    background-image:url(feature-icon-sprite.png);
    background-size: 22px;
}
.schedule {
    background-position: 0 0; 
}
.selections {
    background-position: 0 -22px; 
}
.messages 
    background-position: 0 -44px; 
}
...

Здесь HTML.

<span class="feature-icon schedule"></span>
<span class="feature-icon selections"></span>
<span class="feature-icon messages"></span>

Я видел статьи в Интернете, например this. Похоже, что проблема с пиксельным округлением с масштабированием в Chrome. Я попытался изменить размер на 20 пикселей, чтобы избежать проблемы, но это все еще происходит при масштабировании 110%.

Ответы

Ответ 1

Я думаю, вы могли бы добавить размер фона с авто, чтобы исправить эту проблему. Это работает для меня.

.thump {
  background-size: auto 100%; 
}

Это работает только тогда, когда все ваши значки выравниваются в одной строке или столбце (в столбце должно быть: 100% auto). Больше похоже на формулу ниже:

background-size: auto 100%/(rows);

background-size: 100%/(columns) auto;

В этом стиле ваше фоновое изображение будет фиксироваться в div, как вы хотите.

Надеюсь, это может вам помочь.

Ответ 2

Полная версия изображения кажется три "Thumbs up" рядом друг с другом. Вы можете заменить элемент спрайта следующим (я попробовал это на примере, который вы предоставили, и это отлично масштабируется):

<img src="data:image/png;base64,yourbase64stringhere" >

Теперь все, что вам нужно сделать, это скрыть часть изображения (например, 66,6% справа). Для этого вы можете использовать путь клипа, или вы можете просто отрезать спрайт, чтобы был только один значок большого пальца.

Ответ 3

Кажется, что установка размера фона для авто для .feature-icon будет работать:

.feature-icon {
  background-size: auto;
}

Изображение не становится несогласованным, но, возможно, вы не указали все необходимые CSS, чтобы проверить его.

Вы можете проверить эту скрипту для более подробной информации.

Ответ 4

Я не вижу проблемы при добавлении

background-size: cover;
background-repeat: no-repeat;

для кодирования...