静态背景图像迅速"脉动" - 非常奇怪

Question

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

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

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

你可以在这里看到div:Rouvou.com/fiction.它们被称为.circle-blue或.circle-red两个类的行为相同.

所以这里变得奇怪:在带有ThinkVision显示器的联想ThinkCentre机器上,使用Firefox,它们快速"脉动",或者在宽度和高度上向上和向下增长,然后再次快速缩小,就像闪烁一样.

由于联想是只安装了两个浏览器的学校计算机,我唯一可以测试的其他浏览器是IE,其中没有找到此行为.我希望我可以在这里发布视频来展示它,但这里是其中一个div的截图:

我已经在很多其他类型的机器上的几乎所有浏览器上进行了测试,我发现这种行为的唯一地方是使用ThinkVision显示器的联想ThinkCentre上的Firefox.我还测试了20个不同的ThinkCentres,每个单独显示一个错误.

以前有没有人碰到这样的事情？什么可能导致它？任何人都可以至少在他们的机器/浏览器上重现这个问题吗？

我正在使用Firefox 31.0,如果这很重要的话.

Answer 1

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

修复,因为在重新调整页面大小时这些点的大小不会改变,将在Gimp或Photoshop中手动将图像重新调整到正确的大小,而不是试图在运行中进行.这个小小的清理工作也会对页面的整体加载/渲染进行微小的改进.

如果您确实需要调整图像大小,则您的选项是使用img带有width: 100%; height: auto顶部文本并覆盖文本的标记,或者创建一个只有双色调和水平斜线的较大图像.我可能只是将这个全部background-image设为方形图像,然后将其添加为位置设置在中心/中心(如果需要调整大小,则将斜线保持在正确的位置)并将border-radiusdiv 设置为50%的div大小,再次成为一个圆圈.

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