Javascript 如何隔离Firefox17渲染错误

我在一些HTML中发现了一个奇怪的小错误，它只出现在Firefox17中（OSX 10.8.2，还没有测试过其他操作系统）。我有一个“侧边栏”css类，它包含一些文本，这些文本是许多页面上的重复元素。在一个页面（仅）上，此文本呈现时，好像它的css visiblility属性设置为“隐藏”（它不显示，但在其周围保留正确的空间）

左Firefox 16.0.2右Firefox 17.0.1

以下是css类：

.sidebar {
      position:fixed; 
      top: 2px;
      left:4px;
      display:table-cell; 
      vertical-align:bottom;
      z-index: 2;
      width: 700px;
      height: 64px;
      -webkit-transform: rotate(90deg) translateX(320px) translateY(340px) scale(1);
      -moz-transform:    rotate(90deg) translateX(320px) translateY(340px) scale(1);
      -o-transform:      rotate(90deg) translateX(320px) translateY(340px) scale(1);
      -ms-transform:     rotate(90deg) translateX(320px) translateY(340px) scale(1);
      transform:         rotate(90deg) translateX(320px) translateY(340px) scale(1);      
}

受影响的HTML：

<div class="sidebar" >
    <span class="TMUP1">
        <a href="/">Section_Header</a>
    </span> 
    <span class="sidebarcontents" style="vertical-align: 50%">
        Subsection_Header
    </span>
</div>

与

（即移除旋转）

它与插件和插件没有任何关系，就好像我手动禁用了所有这些插件和插件一样，错误仍然很明显

其他具有相同HTML、相同css和相同google分析代码的页面呈现效果良好

问题页面是站点上最大的页面（约10KB的优化/压缩html，约160个小图像/880KB要加载），所有其他页面都较小

身体几乎完全由这个元素的160个重复组成

<div class= "outerDiv" style="background-color:transparent">
<div class="innerDiv">
    <a href='/artists/artist_name/'>
    <img src="/artists/artist_name/_portrait/artist_portrait.jpg" alt="" width="150" />
    </a>
<div class="short_caption">
    <a href='/artists/artist_name/' style="color:white">artist_name</a>
<br />artist_location
</div></div></div>

艺术家位置

如果我大幅减少这些元素的数量，这也会修复这个bug

有没有办法进一步隔离/修复这个bug？目前看来，我要么牺牲分析，要么重新设计网站，这两者都有点过分

更新

我做了更多的调查，并把它归结到这一点

• 这和谷歌javascript无关。任何脚本，即使是空的
  ，都会调用该bug
• 我使用的是从链接样式表中拉入@font-face的自定义字体。
  • 如果我只使用系统字体，错误就会消失
  • 如果我将@font-face规则从链接样式表移动到页面标题中，错误将变得更具弹性：无论是否存在脚本标记，它都会出现
• 关闭硬件加速，错误消失
• 如果从变换中删除旋转，错误将消失
• 减少页面大小（从160张图像减少到10张左右），错误就会消失
• Firefox nightly（v20）没有显示该漏洞，因此导致该漏洞的原因将在v17.0.1以后的某个版本中修复

下面是一些显示问题的示例页面（我在原始问题中避免了它们，因为我猜链接在这里有点不受欢迎）。浏览器缓存需要在每个页面视图之间清空，以准确评估bug的影响

• 缺陷存在
• 缺陷存在
  • 简化html和最小化css以隔离错误
  • 没有javascript，只有一个空的
    标记

这些样本均来自测试页面：

• 虫子缺席
• 虫子缺席
• 虫子缺席
• 虫子缺席
• 缺陷存在
  • 这是一个奇怪的。如果@font\u face样式表是外部的，则只有当
    标记存在时，错误才会显示。如果@font\u face规则被移动到内部样式表中，那么在缺少
    标记的情况下，该错误也很明显

我似乎无法在不改变页面设计的情况下消除这个bug，以至于我不得不重新设计这个网站，对于一个浏览器的一个版本来说，这个网站似乎有点OTT。我希望有一个更实际的解决办法。我尝试使用jQuery浏览器嗅探，但由于javascript似乎引入了一个无法启动的bug

更新2

现在我有机会在另一台机器上进行测试，发现这个bug很少出现。在原始机器上以新用户身份进行测试根本不会显示错误。因此，这显然与用户设置有关，而且——希望如此——相当罕见

更新3

根据@Boris的建议，我尝试了增量旋转，以查看页面在何处以及如何分解。从旋转（0度）到大约80度都很好，然后开始分离。我在所有元素中添加了1px边框，以帮助隔离问题

• 显示0-90度（自动刷新时，它们会从一个反弹到下一个）。
  这是使用

  -moz转换

  ，因此只值得在Firefox中查看
• ：这是我在firefox 17.0.1中得到的结果

更新4

回答@arttronics的一些建议-这里展示了它应该如何叠加（当我切换到3d视图时，bug消失了，就好像Firefox正在努力做正确的事情一样）

• 在3D视图中看到的保护内容是用于文本对齐的，它不会影响bug-
• 变焦复位，无变化
• 新的用户配置文件显示了相同的行为

更新5–重置Firefox

在执行Firefox重置（根据@arttronics的回答）后，错误仍然存在，尽管可能恢复力稍差

在重置之前，这将调用错误
-清除缓存
-刷新页面

重置后，清除缓存并刷新大约50%的时间会出现错误。如果我清除缓存，重启firefox，返回页面——每次它都在那里

---

好的，我要回答我自己的问题。。。我还没有找到一个解决方案，但由于stack overflow社区的兴趣和惊人的努力，我似乎相当清楚

• 除了我的用户设置的特殊性之外，这可能是一个很难复制的问题
• 这是一个只在Firefox17.0.1中出现的模糊bug，显然在Firefox18中已经修复
• 没有不涉及站点重新设计的变通方法

---

因此，为了继续讨论其他问题，我建议我们停止讨论这个问题！感谢所有提出意见和建议的人，这是一个非常有教育意义的过程。

重置Firefox

根据您的详细问题和r

 -moz-transform:    rotate(90deg) translateX(320px) translateY(340px) scale(1);

 -moz-transform:    translateX(320px) translateY(340px) scale(1);

<div class= "outerDiv" style="background-color:transparent">
<div class="innerDiv">
    <a href='/artists/artist_name/'>
    <img src="/artists/artist_name/_portrait/artist_portrait.jpg" alt="" width="150" />
    </a>
<div class="short_caption">
    <a href='/artists/artist_name/' style="color:white">artist_name</a>
<br />artist_location
</div></div></div>