静态背景图像＆＃34;脉动＆＃34;很快 - 很奇怪

Question

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

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

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

您可以在此处查看div：Rouvou.com/fiction。他们调用了.circle-blue或.circle-red，这两个类的行为相同。

所以在这里它变得奇怪：在使用ThinkVision显示器的联想ThinkCentre机器上，使用Firefox，他们＆＃34;脉动＆＃34;快速地，或者通过宽度和高度的像素向右和向下增长，然后再次快速收缩，就像闪烁一样。

由于联想是一台只安装了两个浏览器的学校计算机，我唯一可以测试的其他浏览器是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的{​​{1}}标记并将文字覆盖在顶部，或制作一张只有双色调的大图片颜色和横向斜线。我可能只是把它全部变成方形图像，然后将其添加为width: 100%; height: auto，位置设置在中心/中心（如果需要调整大小，则将斜线保持在正确的位置）并设置{{1在div上达到div大小的50％，再次成为一个圆圈。

background-image

Answer 2

我认为它只是您正在运行的Firefox版本。例如我使用Firefox had trouble with HTML 5 validation。带有图形错误的Firefox版本是22.0，当我在笔记本电脑上查看相同的东西时，使用版本38.0.1，它位于正确的位置。我认为Firefox实现某些事情的速度较慢，并且无法在不更新浏览器的情况下完成某些方面。

我认为在你的场景中也会发生同样的事情。因此，这些图像的风格化程度使得您的Firefox版本不能完全支持;它会尽力向你展示，但不能正确地做到这一点。

我通过浏览各自的w3schools页面测试了几个css属性，唯一似乎有任何类型的图形错误的样式是background-size:contain。但是，这只发生在更早版本的Firefox上，可能与您运行的版本不同。

我继续这个Firefox website，它说你需要：

  

支持缩放背景图像的浏览器（例如Firefox 3.6或更高版本）

使用background-size:contain;。

最终答案：您的Firefox版本不完全支持background-size:contain;，因此存在一些视觉错误。

Answer 3

只是一个想法，不知道它是否有帮助，因为我无法在我的机器上测试它，但你是否尝试在你的div上设置max-width和max-height？在检查它们时，它们只设置width和height。

尝试将它们设置为相同的宽度和高度：

max-width: 57px;
max-height: 57px;

您还可以尝试设置min-height和min-width：

min-width: 57px;
min-height: 57px;

Answer 4

图像最初为72x72，您可以将浏览器缩小到57x57，但GPU可能会校正缩放以适应均匀的边界（取决于您的机器所具有的图形卡）。如果是这样，重新缩放可能会导致父元素调整大小以适应其内容（因为您没有指定溢出行为），这将导致重新计算所包含的元素。

解决方案：将背景图像渲染为57x57，考虑到它将被舍入，或者 - 如果可以的话，最好将其渲染为56x56。你也会让CSS更轻一些：）

Answer 5

您能否清除浏览器中加载的所有CSS

 CTRL+SHIFT+DELETE

我也有一种感觉，那就是有多个CSS文件指向div的id。您也可以更新您的浏览器。