静态背景图像快速“脉动” - 非常奇怪

Posted 2023-03-06

【中文标题】静态背景图像快速“脉动” - 非常奇怪

【英文标题】：Static background-image "pulsates" rapidly - very strange

【发布时间】：2015-07-16 23:57:23

【问题描述】：

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

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

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

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

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

由于联想是一台只安装了两个浏览器的学校电脑，我唯一可以测试的其他浏览器是 IE，在其中没有发现这种行为。我希望我可以在这里发布视频来展示它，但这是其中一个 div 的屏幕截图：

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

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

我正在使用 Firefox 31.0，如果这很重要的话。

【问题讨论】：

我认为这不是您需要担心的事情。 FF 31 已过时，您仅在该特定机器上的 1 个浏览器上发现此行为。我只是将其视为边缘情况并忽略它。我刚刚在 FF 上查看了您的网站，看起来不错

@huangism 都一样，知道是什么原因会很好，或者至少很有趣。

您是否在学校的多个 ThinkCentre 上复制了此内容？

@BoltClock 是的，它始终如一地出现在每个 ThinkCentre 上。我测试了 20 个。

这可能与您的 CSS 无关。在过去的几年里，我在不同的系统上看到了这样的渲染错误（闪烁的对象、不清晰、闪烁的线条或像素、不良的滚动行为），主要是在 Firefox 和 Chrome 中。它们出现在一个浏览器版本中，而在另一个版本中消失。它们从未出现在两个不同的浏览器供应商中。它们出现在双头系统的一个显示器上，从不在另一个显示器上。必须是渲染引擎甚至显示驱动程序中的错误。您可以尝试向供应商提交错误报告（不要忘记添加浏览器版本，还要添加硬件和操作系统信息）。

【参考方案1】：

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

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

如果您确实需要调整图像大小，您的选择是使用带有width: 100%; height: auto 的img 标签并将文本覆盖在顶部，或者制作仅具有两种色调和水平颜色的较大图像削减。我可能只是将其全部制作为方形图像，然后将其添加为background-image，并将位置设置为中心/中心（如果您需要调整大小，将斜线保持在正确的位置）并设置border-radius将 div 缩小到 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;

【参考方案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;，因此存在一些视觉错误。

【参考方案3】：

只是一个想法，不知道它是否会有所帮助，因为我无法在我的机器上对其进行测试，但是您是否尝试过在您的 div 上设置 max-width 和 max-height？在检查它们时，他们只设置了width 和height。

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

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

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

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

【参考方案4】：

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

解决方案：将背景图像渲染为 57x57，考虑到它会更圆，或者 - 如果可以，最好 - 将其渲染为 56x56。您还将使 CSS 更轻：)

【参考方案5】：

你能清除浏览器中加载的所有 CSS 吗

 CTRL+SHIFT+DELETE

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