html - 静态背景图像 "pulsates"快速 - 非常奇怪

Question

这是我见过的最奇怪的事情。

我有一个具有背景图像的 div 类，定义如下:

background-image: url("circle.png")
background-size: contain

您可以在此处查看 div:Rouvou.com/fiction .它们称为 .circle-blue 或 .circle-red，这两个类的行为相同。

所以这就是它变得奇怪的地方:在带有 ThinkVision 显示器的 Lenovo ThinkCentre 机器上，使用 Firefox，它们快速“脉动”，或者在宽度和高度上向右和向下增加一个像素，然后再次收缩，速度非常快，像闪烁。

由于 Lenovo 是只安装了两个浏览器的学校计算机，我唯一可以测试它的其他浏览器是 IE，在其中未发现此行为。我希望我可以在这里发布视频来展示它，但这是其中一个 div 的屏幕截图:

我已经在许多其他类型的机器上的几乎所有浏览器上测试过它，我发现这种行为的唯一地方是 Lenovo ThinkCentre 上的 Firefox，带有 ThinkVision 显示器。我还测试了大约 20 个不同的 ThinkCentres，并且在每个 ThinkCentres 上都显示此错误。

有没有人遇到过这样的事情？可能是什么原因造成的？任何人都可以至少在他们的机器/浏览器上重现该问题吗？

如果重要的话，我使用的是 Firefox 31.0。

Answer 1

如果不访问其中一台机器，我无法对其进行测试，但在查看您的页面后，我可以 99% 肯定地说问题实际上是 background-size: contain 的一部分下面的规则。 Firefox 在那个浏览器版本中才开始支持它，它可能还有点问题。( http://caniuse.com/#feat=background-img-opts )另一件让我相信是这种情况的事情是，当不应用该规则时，背景图像会像您描述的那样向右和向下扩展。

由于这些点的大小在调整页面大小时不会改变，因此解决方法是在 Gimp 或 Photoshop 中手动将图像调整为正确的大小，而不是尝试即时执行。这个小的清理也会对页面的整体加载/呈现做出微小的改进。

如果您确实需要调整图像大小，您的选择是使用带有 width: 100%; 的 img 标签； height: auto 并将文本覆盖在顶部，或者制作只有双色调颜色和水平斜线的更大图像。我可能只是将其全部设为正方形图像，然后将其添加为 background-image 并将位置设置为中心/中心(如果需要调整大小时，将斜线保持在正确的位置)和将 div 上的 border-radius 设置为 div 大小的 50%，使其再次成为一个圆。

#category .category-thing .category-thing-right-wrapper-wrapper .category-thing-right-wrapper {
  display: inline-block;
  position: absolute;
  width: 57px;
  height: 57px;
  background-size: contain;
}