0

Есть следующий код:

<div class="item">
 <div class="item-head" style="display: block; background-image: url("back-image.png")">
  <div class="item-white-back" style="display: block; background-image: url("white-bg.png");"></div>
  <div class="title"></div>
 </div>
 <div class="item-body">...</div>
</div>

Сам item-head имеет свойство position: relative, item-white-back и title имеют position:absolute. Суть в том, что по какой-то причине на разрешениях шириной от 992пх до 1040пх происходит неправильное заполнение и остаётся небольшой отступ в один пиксель, которого там быть не должно. введите сюда описание изображения

Если сдвинуть при помощи редактора кода, то выходит что-то совсем странное: введите сюда описание изображения

При попытке перенести на codepen оказалось что ошибка не воспроизводится.

Если увеличить ширину экрана эти проблемы соответственно пропадают. Решение

Перепробовал всё: переносить белый фон в тот же блок. Менял background-size по-разному, всё без результатов, совершенно не понимаю чем вызвана проблема и куда надо копать.

Забыл добавить: проблема появляется на Google Chrome (Версия 86.0.4240.111).

2
  • такое может быть из-за масштаба браузера, если смотреть адаптив через инспектор
    – fanfer
    5 ноя 2020 в 16:34
  • В этом и проблема, это как-то можно исправить? И главное интересно, почему в тех же условиях проблема не повторяется на codepen. 6 ноя 2020 в 14:47

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.