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

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

View screenshot

Вот 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%.

источник

2016-01-06 Nathaniel S

ли вы это исправил? –

Можете ли вы отправить рабочий URL. –

https://codepen.io/anon/pen/oGMwbm При изменении увеличения на 50% или выше (уменьшение) можно увидеть другие части спрайта. Я заметил, что он влияет на единицы REM намного больше, чем px, но может также зависеть от размера изображения. –

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

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

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

источник

2017-10-13 12:40:11

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

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

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

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

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

С помощью этого стиля ваше фоновое изображение фиксируется в div так, как вы хотите.

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

источник

2017-10-17 02:05:53

Мессинг с размером фона действительно помог. Обратите внимание, что пример codepen намного проще, чем фактическая разметка страницы, и единственное, что действительно имело значение, - это возиться с bgsize. –

Похоже настройки фона размер для авто для .feature-icon будет работать:

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

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

Для получения более подробной информации вы можете проверить this fiddle.

источник

2017-10-17 06:46:31 Dolf

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

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

к codepen ...

источник

2017-10-18 13:35:52 ToTaTaRi

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

ответ

Смежные вопросы