1 пиксель фона повторяется во время увеличения в Google Chrome

Я столкнулся с действительно странной проблемой в Google Chrome (рабочий стол и мобильный телефон). Вот jsfiddle example. Если вы увеличиваете масштаб до 500%, вы увидите зеленую линию в верхней части div. Кажется, что фоновое изображение повторяется. Зеленая линия - это нижняя строка моего фонового изображения, если я делаю фоновое изображение снизу прозрачным, оно исчезает. Я добавил повтор-й в моем CSS, но она по-прежнему повторяет 1 пиксель моего изображения:1 пиксель фона повторяется во время увеличения в Google Chrome

background: url('') repeat-x;

источник

2013-06-13 Andrew

Я вижу этот вопрос чаще всего в Android устройств. И теперь масштабирование 'background-image's нарушается и на настольном Chrome. –

Если я правильно помню, это ошибка _repeating_, где вы видите нижнюю часть изображения. Вы должны уметь это исправить, перемещая изображение на половину пикселя вверх по фону: left -0.5px; '. Но тогда вам нужно добавить один пиксель внизу. (Но я не могу проверить прямо сейчас, если я его правильно помню;)) –

Вычитания 1px от всего, в том числе фонового рентгеновского положения.

.red-div{ 
    background-color: red; 
    height: 29px; 
    width: 300px; 
} 

.child { 
    width: 100%; 
    height: 100%; 
    background: url('') repeat-x; 
    background-position:-1px 100%; 

}

JSFiddle

источник

2013-06-13 14:21:52 Cattsan

1 пиксель фона повторяется во время увеличения в Google Chrome

ответ

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