如何隔离firefox 17渲染bug

时间：2012-12-08 06:11:24

标签： javascript html css firefox

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

enter image description here 左 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>

网站上的所有网页都包含相同的Google Analytics异步跟踪javascript。如果我删除此代码，该错误消失。我检查了代码，这是正确的。它在网站的每个页面上使用，所有其他页面使用SAME 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 /安全模式下查看
  - 删除谷歌分析代码
  - 从＆＃39;侧边栏＆＃39;替换以下行？ class css 

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

与

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

（即移除旋转）

它与插件和插件无关，就像我手动禁用所有这些bug一样，这个bug仍然很明显。

具有相同HTML，相同css和相同Google分析代码的其他网页呈现正常。

问题页面是网站上最大的（~10KB优化/ gzipped 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之后的某个未来版本中修复。

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

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

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

我似乎无法在不改变网页设计的情况下消除错误，我必须重新设计网站，这对于一个版本的浏览器来说似乎有点OTT。我希望有一个更实际的解决方法。我尝试使用jQuery浏览器嗅探，但因为javascript似乎引入了一个非首发的错误。

更新2

现在我有机会在另一台机器上进行测试，并发现该bug很少见。在原始计算机上作为新用户进行测试根本不会显示错误。因此，这显然与用户设置有关，并且 - 希望如此 - 非常罕见。

更新3

根据@Boris的建议，我尝试了增量轮换以查看页面分解的位置和方式。从旋转（0度）直到约80度是很好的，之后它开始分崩离析。我已经为所有元素添加了1px边框，以帮助隔离问题...

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

更新4

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

  • 在3D视图中看到的原始内容是用于文本对齐，它不会影响错误 - see this cut-down version;
  • 缩放重置，无变化;
  • 新用户个人资料表现出相同的行为。

更新5 - 重置Firefox

执行Firefox重置后（根据@ arttronics＆＃39;回答），错误仍然在这里，尽管可能不那么有弹性。

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

重置后，清除缓存并刷新大约50％的时间会带来错误。如果我清除缓存，重新启动firefox，返回页面 - 每次都在那里。

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

  • 这可能是一个非常难以复制的问题，超出了我的用户设置的特点
  • 这是一个不起眼的错误，仅在Firefox 17.0.1中显示，并在Firefox 18中明显修复
  • 没有不涉及网站重新设计的解决方法

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

1 个答案:

答案 0 :(得分：3)

重置Firefox

根据您的详细问题和结果评论，此特定错误仅对您而言是唯一的，并且在某些情况下（新的用户配置文件在新的Firefox用户配置文件出现问题时没有问题）。

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

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

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

  

到目前为止，我没有看到有人回复说他们也看到了这个标志   下沉问题，但至少Firefox 18 ETA是在3周内   评价。

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

相关问题
最新问题