Почему на элементе появляется копия текста ниже?

Question

[Полина Пухова]

При проверке с помощью github pages в категория появляется полупрозрачная копия текста ниже, причем безо всякой системы. При изменении любого параметра(размер экрана, убрать какое-нибудь свойство на панели разработчика) пропадает, но при обновлении возвращается обратно, причем не всегда на том же элементе.

Страница: https://pcheluntik.github.io/TellUs/category.html

Код элемента:

<li>
  <a href="" class="b-green category-item">
    <p class="stock-quantity">135</p>
    <img src="resources\img\barbershop.svg" alt="">
    <p>Парикмахерские</p>
  </a>
</li>

Как это исправить? Возможно связано с наведением, но каким образом это происходит найти не могу

Comments

[Сергей Горячев]

И тут бага не наблюдаю) FF, linux mint.

Answer 1

[Полина Пухова]

Решено с помощью блока-обертки для img с фиксированным размером, после чего текст не смещается

Answer 2

[iBird Rose]

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

Comments

[Полина Пухова]

Причем вылазит на тех элементах, на которых чуть дольше подгружается иконка. То есть текст загружается, почему-то пробивает до слоя с градиентом, а потом смещается на свое место

Answer 3

[Tizi]

Хром. Полет нормальный.

Клик

Comments

[iBird Rose]

открой дебагер и где "Парикмахерские" - удали иконку. тобишь тег img