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

Question

问题

嗨,我正在与精灵一起工作,并获得了一些火狐和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_images{background:url("../sprite_images/sprite.jpg");display:inline-block;}

._sprite_images_0{width:50px;height:50px;background-position:0 0px;}
._sprite_images_1{width:50px;height:50px;background-position:0 -50px;}
._sprite_images_2{width:50px;height:50px;background-position:0 -100px;}

[...]

我的精灵的每个图像的大小为50x50(px),大约为2到6 KB.我用jpg,png和gif类型测试了它们.都得到了相同的结果.

---

截图

655张图片

656张图片

Answer 1

编辑:如果问题的原因不是CSS长度整数值,那么它是所讨论的浏览器可以处理的最大图像大小.这可能是重新阅读你的问题的情况.

请参阅Firefox Bug 591822:高于或大于32767的图像

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

如果你想让它工作,请帮助cairo,底层图像库.

你也可以做的是不将你的精灵分散在一个轴上(在你的情况下是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.

精灵#656已经偏移655 * -50是-32,750.

精灵#657已经偏移656 * -50是-32,800.

一个16位无符号整数^维基百科(半字,字短)的范围从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;}

这可能更兼容跨浏览器,因为每个单元的整数长度不会太小.

让我知道如果它有效,你没有在你的问题中发布任何代码作为演示示例,所以我也没有编译演示,但我希望解决方案建议背后的想法是明确的.