Firefox 和 Chrome 在 655 张图片后停止显示我的精灵

Posted 2023-02-16

【中文标题】Firefox 和 Chrome 在 655 张图片后停止显示我的精灵

【英文标题】：Firefox and Chrome stops displaying my sprite after 655 images

【发布时间】：2011-12-19 04:36:54

【问题描述】：

问题

您好，我正在使用 sprites 并获得了一些有趣的 firefox 和 Chrome 行为。当我的精灵有 655 图像或更少时，我的精灵可以正常工作。但是当它走得更远（656 或更多）时，它不会被显示（只是变得不可见）。我猜问题不在我的代码中，因为它在 Opera 和 IE 中运行良好。怎么会？

---

详情

我正在使用 php 即时生成精灵。生成的html是这样的：

<span class="_sprite_images _sprite_images_1"></span>
<span class="_sprite_images _sprite_images_0"></span>
<span class="_sprite_images _sprite_images_2"></span>
<span class="_sprite_images _sprite_images_3"></span>
<span class="_sprite_images _sprite_images_4"></span>
<span class="_sprite_images _sprite_images_5"></span>

[...]

CSS 看起来像这样：

._sprite_imagesbackground:url("../sprite_images/sprite.jpg");display:inline-block;

._sprite_images_0width:50px;height:50px;background-position:0 0px;
._sprite_images_1width:50px;height:50px;background-position:0 -50px;
._sprite_images_2width:50px;height:50px;background-position:0 -100px;

[...]

我的精灵的每张图片大小为 50x50 (px)，大小约为 2 到 6 KB。 我已经用 jpg、png 和 gif 类型对它们进行了测试。都得到了相同的结果。

---

截图

655 张图片

656 张图片

【问题讨论】：

您能否截取您想要完成的任务的屏幕截图？也许我们可以建议一种对浏览器要求不高的替代方法？

嗯，我需要的实际上是信息（它是用于文书工作——当然还有自我好奇心）。刚刚添加了截图。

您能否在jsfiddle.net 中展示一个示例，以便更好地理解问题。

我看到你有很多打开的标签页和软件，还有活跃的插件，可能是内存问题？

这是一个猜测，但是根据您的描述，并且由于您的所有图像都在水平方向上彼此相邻，您可能会遇到一些浏览器限制（您的图像宽 32.750 像素，我计算）。确认这一点的一种方法是将图像均匀地分布在水平和垂直方向上。例如。每 25 个图像后中断。如果我是对的，您应该能够容纳 很多 更多图像。

【参考方案1】：

编辑：如果问题的原因不是 CSS 长度整数值，那么它是相关浏览器可以处理的最大图像大小。在这里重新阅读您的问题可能更是如此。

见Firefox Bug 591822: Images taller or wider than 32767

我使用下面计算的值通过谷歌快速查找该票；）

如果您希望它工作，请通过cairo, the underlying image library 提供帮助。

您也可以做的就是不要仅将精灵分布在一个轴上（在您的情况下为 y），而是在两个轴上（x 和 y）：

0: 0 0
...
654: 0 -32700
655: -50 0

等等。 PHP：

$offset = -50;
$x = (int)($n/655) * $offset;
$y = $n % 655 * $offset;

---

每个精灵的偏移量为-50 像素。

第一个精灵的偏移量为0 ((1-1) * -50)。

对于精灵 #655，偏移量是 654 * -50，即 -32,700。

sprite #656 的偏移量为655 * -50，即-32,750。

sprite #657 的偏移量为656 * -50，即-32,800。

16 位无符号 integer ^Wikipedia（半字、字、短）范围从 0 到 65535，它是从 -32,768 到 32,767 的有符号对应项。

只是比较这些值表明，如果浏览器使用该数据类型来存储像素单元的整数值，它将无法：

-32,800 is lower than -32,768

在这种情况下可能发生的情况是，它正在往返：

-32,800 => 32

如果您将精灵放置在（相对）坐标 -32（这是不可能的）上的精灵窗格上，您可能会看到它。

这只是一个假设，我没有检查相关浏览器的源代码，所以请谨慎对待。

但是，这可能会导致一些快速解决策略，如果结果很快，这是公平的：

如何解决？

您可以尝试（只要渲染算法不受此影响）使用另一个单元。将所有精灵放入父元素中，例如<div>:

<div class="sprites">
  <span class="img-1"></span>
  <span class="img-2"></span>
  <span class="img-3"></span>
  ...
  <span class="img-656"></span>
</div>

CSS：

div.sprites font-size:50px;
    div.sprites span background: ... ; height: 1em; width: 1em; /* default sprite definition*/
        div.sprites span.img-1 background-position:0 0;
        div.sprites span.img-2 background-position:0 -1em;
        div.sprites span.img-3 background-position:0 -2em;
        ...
        div.sprites span.img-656 background-position:0 -655em;

这可能更适合跨浏览器，因为每个单元的整数长度不会小很多。

让我知道它是否有效，你没有在你的问题中发布任何代码作为演示示例，所以我也没有编译演示，但我希望解决方案建议背后的想法很清楚。

【讨论】：

但 Crhome 和 Firefox 都能够显示 this image，即 8211 x 8652。我猜你首先对 CSS 的看法是正确的——一旦我得到确认，我就会在这里发布。谢谢（：

看起来确实是 CSS 整数的错：p