Firefox 缩放图像消失

Question

我正在重新设计主题的布局，它在 Chrome 和 Safari 中运行良好，但产品的图像在 Firefox 中悬停时会消失。

首先我认为是缩放导致了问题，但是当它缩小时它会起作用（transform: scale(0.5);)

另外一个奇怪的地方是下面部分的其他图片没有这样的问题

请帮忙，谢谢

主题预览链接：http://hongyuan.theme.yurl.vip/
（有问题的产品在幻灯片下方）

Answer 1

这听起来确实是一个错误，尤其是 text-overflow 属性。

您将包装器的<a> 元素的字体大小设置为0，您还说文本不应溢出，溢出的文本内容应替换为省略号…。 当您应用scale(1.1) 时，由于display: inline 规则而被视为文本的内部<img> 元素确实会溢出。这就是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>

要解决该问题，您有多种方法，包括在 sn-p (text-overflow: clip) 中的一种，或将您的 <img> 显示为 block，或将包装器的 font-size 设置为 1px，可能还有其他人......