javascript - 如何隔离firefox 17渲染错误

Question

这个问题不太可能对任何 future 的访客有帮助；它只与一个小的地理区域、一个特定的时间点或一个非常狭窄的情况相关，通常不适用于互联网的全局受众。如需帮助使这个问题更广泛适用，visit the help center .




8年前关闭。




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


左 火狐 16.0.2； 右 火狐 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(这是一个重复的标题)呈现良好

谷歌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 和相同 google 分析代码的其他页面呈现良好。

问题页面是网站上最大的页面(约 10KB 的优化/gzipped html，大约有 160 个小图像/880KB 加载)，所有其他页面都较小。

body 几乎完全由这个元素的 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>

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

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

更新

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

这与谷歌 javascript 无关。任何脚本，甚至是空的 <script></script>将调用错误。

我正在使用从链接的样式表中提取的 @font-face 的自定义字体。

如果我只使用系统字体，错误就会消失。

如果我将@font-face 规则从链接的样式表移到页眉中，该错误将变得更有 flex :无论是否存在脚本标签，它都会显示

关闭硬件加速，bug 消失。

从变换中删除旋转，错误就会消失。

减小页面大小(从 160 张图像到 10 张左右)，错误就会消失。

Firefox nightly (v20) 不显示该错误，因此在 v17.0.1 之后的某个 future 版本中修复了导致该错误的任何原因

以下是一些显示该问题的示例页面(我在原始问题中避免了它们，因为我猜这里的链接有点不受欢迎)。每次页面浏览之间都需要清空浏览器缓存，才能准确衡量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 View 时，错误消失了，就好像 Firefox 正在努力做正确的事情一样)。

3D View 中的突出内容是为了文字对齐，不影响bug-see this cut-down version ;

缩放重置，没有变化；

新的用户配置文件表现出相同的行为。

更新 5 – 重置 Firefox

执行 Firefox 重置后(根据@arttronics 的回答)，该错误仍然存​​在，尽管可能 flex 稍差。

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

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

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

除了我的用户设置的特殊性之外，这可能是一个很难复制的问题

这是一个不起眼的错误，仅在 Firefox 17.0.1 中出现，显然已在 Firefox 18 中修复

没有不涉及网站重新设计的解决方法

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

Answer 1

重置火狐

根据您的详细问题和由此产生的评论，此特定错误仅对您而言是独一无二的，并且在某些条件下(新的操作系统用户配置文件没有问题，而新的 Firefox 用户配置文件有问题)。

是时候到 重置 火狐。刚刚follow these simple steps你的 v17.0.1 应该会恢复正常。如果您的 Firefox 安装有多个配置文件，则 follow these other steps反而。

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

编辑:根据我前几天写的评论:

As of yet I did not see anybody reply that they too see this logo sinkhole issue, but at lease Firefox 18 ETA is in 3 weeks as of this comment.

话虽如此，解决方案可能只是等到 火狐 18 被释放。