Изображение масштаба Firefox исчезает

Question

Я переделываю макет темы, он отлично работает в Chrome и Safari, но изображения продукта исчезают в Firefox при наведении курсора.

Сначала я подумал, что проблема вызвана масштабированием, ноон выполняет свою работу, когда его уменьшают (transform: scale (0.5);)

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

Пожалуйста, помогите,спасибо

Ссылка на предварительный просмотр темы: http://hongyuan.theme.yurl.vip/
(продукты с проблемой находятся под слайд-шоу)

Answer 1

Это действительно звучит как ошибка, особенно со свойством text-overflow.

Вы устанавливаете для font-size элемента <a> элемента оболочки значение 0, вы также говорите, что текст не должен переполняться ипереполненное текстовое содержимое должно быть заменено многоточием ….При применении scale(1.1) внутренний элемент <img>, который воспринимается как текст из-за правила display: inline, переполняется.И вот тут включается алгоритм text-overflow: ellipsis и ваше изображение исчезает:

a {
  font-size: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  width: 120px;
  height: 120px;
}
a > img {
  display: inline;
  transition: transform .3s linear;
  max-width: 100%;
  max-height: 100%;
}
a > img:hover {
  transform: scale(0.9);
}
a.no-ellipsis {
  text-overflow: clip;
}

ellispis:
<a>
  <img src="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png">
</a>
no ellipsis:
<a class="no-ellipsis">
  <img src="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png">
</a>

Чтобы обойти эту проблему, у вас есть несколько способов, в том числе один во фрагменте (text-overflow: clip) или отображение <img> как blockили установите font-size для вашей оболочки на 1px и, возможно, другие ...