如何隔离firefox 17渲染错误[关闭]

Question

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

^{左 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>

网站上的所有页面都包含一段相同的谷歌分析异步跟踪 javascript。如果我删除此代码，错误就会消失。我检查了代码，它是正确的。它用于站点中的每个页面，以及所有其他页面，使用相同的 html（它是一个重复的标题）呈现良好

google js 代码：

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-000000-0']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

在以下任何一种情况下，该错误都会消失
- 在 firefox 16（相同的用户设置和插件）或任何其他浏览器中查看。
- 在 Firefox 17 / 安全模式下查看
- 删除谷歌分析代码
- 从“侧边栏”类 css 中替换以下行

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

与

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

（即移除旋转）

它与插件和插件无关，好像我手动禁用所有这些错误仍然很明显。

具有相同 HTML、相同 css 和相同谷歌分析代码的其他页面呈现良好。

问题页面是网站上最大的（大约 10KB 的优化/gzip 压缩的 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>

如果我大幅减少这些元素的数量，这也可以修复错误。

任何想法如何进一步隔离/修复错误？目前，我似乎不得不牺牲分析或重新设计网站，这两者似乎都有些过分了。

更新

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

• 这与 google javascript 无关。任何脚本，即使是空的<script></script> 都会调用该错误。
• 我正在使用从链接样式表中拉入@font-face 的自定义字体。
  • 如果我只使用系统字体，错误就会消失。
  • 如果我将 @font-face 规则从链接样式表移到页眉中，则该错误会变得更有弹性：无论是否存在脚本标签，它都会显示
• 关闭硬件加速，bug消失。
• 从变换中移除旋转，错误消失。
• 减小页面大小（从 160 张图片减少到 10 张左右），该错误消失了。
• Firefox nightly (v20) 不显示该错误，因此在 v17.0.1 之后的某个未来版本中修复了导致该错误的任何原因

这里有一些显示问题的示例页面（我在最初的问题中避免了它们，因为我猜这里的链接有点不受欢迎）。每次页面浏览之间需要清空浏览器缓存，才能准确判断bug效果

• original page 存在错误
• test page 存在错误
  • 简化的 html 和最小化的 css 以隔离错误
  • 没有javascript，只有一个空<script></script>标签

这些样本都来源于测试页：

• <script></script> tag removed 没有错误
• rotation removed from transform 没有错误
• page size reduced from 160 to 18 images 没有错误
• no custom fonts 没有错误
• internal stylesheet for custom fonts 存在错误
  • 这是一个奇怪的问题。如果@font_face 样式表是外部的，则该错误仅在存在<script></script> 标记时显示。如果将@font_face 规则移到内部样式表中，那么在缺少<script></script> 标记的情况下，该错误也很明显。

如果不将页面设计更改到这样的程度，我似乎无法消除错误，我不得不重新设计网站，这对于一个浏览器的一个版本来说似乎有点 OTT。我希望有一个更实用的解决方法。我尝试使用 jQuery 浏览器嗅探，但由于 javascript 似乎引入了无法启动的错误。

更新 2

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

更新 3

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

• sample pages 显示 0-90 度（它们应该在自动刷新时从一个反弹到下一个）。
  这是使用-moz-transform，所以只值得在 Firefox 中查看。
• animation：这是我在 Firefox 17.0.1 中得到的结果

更新 4

回答@arttronics 的一些建议 - 这是一个3d firefox view 显示它应该如何叠加（当我切换到 3d 视图时，错误消失了，好像 Firefox 正在努力做正确的事情） .

• 在3D视图中看到的突出内容是为了文本对齐，它不影响bug - see this cut-down version;
• 缩放已重置，没有变化；
• 新的用户配置文件表现出相同的行为。

更新 5 - 重置 Firefox

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

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

重置后、清除缓存和刷新大约有 50% 的时间会出现错误。如果我清除缓存，重新启动 Firefox，返回页面 - 它仍然存在，每次。

---

好的，我要回答我自己的问题...我还没有找到解决方案，但是感谢堆栈溢出社区的兴趣和惊人的努力，我似乎​​很清楚...

• 除了我的用户设置的特殊性之外，这可能是一个很难复制的问题
• 这是一个仅在 Firefox 17.0.1 中出现的模糊错误，并且显然已在 Firefox 18 中修复
• 没有不涉及网站重新设计的解决方法

因此，为了继续处理其他问题，我建议我们搁置这个问题！感谢所有提出 cmets 和建议的人，这是一个非常有教育意义的过程。

Answer 1

重置 Firefox

根据您的详细问题和生成的 cmets，此特定错误仅对您而言是唯一的，并且在某些条件下（新的操作系统用户配置文件没有问题，而新的 Firefox 用户配置文件有问题）。

是时候重置 Firefox了。只需follow these simple steps，您的 v17.0.1 应该会恢复正常。如果您的 Firefox 安装有多个配置文件，则改为 follow these other steps。

注意：使用重置功能时，您的书签、浏览历史记录、密码、cookie 和网络表单自动填写信息将被保存。但是，您的扩展程序和主题将被删除；打开的选项卡、窗口和选项卡组不会被保存；并且您的偏好将被重置。

---

编辑：根据我前几天写的 cmets：

到目前为止，我还没有看到有人回复说他们也看到了这个徽标 天坑问题，但至少 Firefox 18 ETA 在 3 周内 评论。

话虽如此，解决方案可能只是等到 Firefox 18 发布。