Странное поведение background-image

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

<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).