如何隔離firefox 17渲染bug

我在Firefox 17（OSX 10.8.2，沒有其他操作系統測試過）中只有一些HTML中出現了一個好奇的小錯誤。我有一個'sidebar'css類，它包含了一些文本，這些文本是許多頁面上的重複元素。在一頁（僅）該文本呈現，就像它的css visiblility屬性設置爲'hidden'（它不顯示，但在其自身周圍留下正確的空間）。如何隔離firefox 17渲染bug

enter image description here ^{離開火狐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);

替換下面的行（即，除去旋轉）

它與插件和插件無關，好像我手動禁用所有這些bug仍然是e vident。

具有相同的HTML，相同的CSS和相同的谷歌分析代碼的其他網頁呈現良好。

問題頁面是網站上最大的（約10KB的優化/ gzipped html，大約160張小圖片/ 880KB加載），其他頁面都較小。

主體幾乎完全由這種元件

<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>

160個重複如果我大幅度削減這些元素的數量順着這還解決了錯誤。

任何想法如何進一步隔離/修復錯誤？目前看來，我不得不犧牲分析或重新設計網站，這兩者似乎有點過分。

更新

我已經做了很多調查，並得到了它下降到這一點。

它與谷歌JavaScript沒有關係。任何腳本，即使是空的<script></script>都會調用該錯誤。
我使用的自定義字體與@ font-face從鏈接的樣式表中拉入。
- 如果我只使用系統字體，錯誤消失。
- 如果我移動的@ font-face規則從鏈接的樣式表到頁面標題中的錯誤變得更有彈性：不管它顯示腳本標籤的存在了
關閉硬件加速，錯誤消失。
從轉換中移除旋轉，該錯誤消失。
減小頁面大小（從160張圖像到10張左右），錯誤消失。
火狐夜間（V20）不顯示的bug所以無論是造成它之後v17.0.1

這裏是顯示問題的一些示例網頁固定在將來的某個版本（我會避免他們在原來的問題，因爲我猜想這裏的鏈接有點皺眉）。瀏覽器緩存需要每個頁面視圖之間被清空，以評估該錯誤影響準確

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臭蟲本
- thi這是一個奇怪的。如果@font_face樣式表是外部的，則該錯誤僅顯示<script></script>標籤是否存在。如果將@font_face規則移動到內部樣式表中，則缺陷<script></script>標籤中的錯誤也很明顯。

我似乎無法消除缺陷不改變頁面的設計到這種程度我不得不重新設計，這似乎有點OTT一個瀏覽器的一個版本的網站。我希望有一個更實際的解決方法。我嘗試使用jQuery瀏覽器嗅探，但是由於JavaScript似乎引入了一個非啓動器的bug。

更新2

現在我有機會來測試不同的機器上，並找到了這個錯誤是明顯的很少。在原始機器上作爲新用戶進行測試並不會顯示該錯誤。所以這顯然是與用戶設置有關的，並且 - 希望之後 - 相當少見。

更新3

繼@Boris一個建議，我試圖增量旋轉，看看在哪裏以及如何在頁面分手。從旋轉（0deg）開始直到80deg纔開始，之後開始分解。我已經添加1px的邊界，所有的元素，以幫助找出問題...

sample pages顯示0-90deg（他們應該從一個反彈到下就自動刷新）。
這是使用-moz-transform所以只值得在Firefox瀏覽。
animation：這是我在Firefox越來越17.0.1

更新4

從@arttronics回答一些建議的結果 - 這裏是顯示它應該如何堆疊一個3d firefox view（當我切換到3D視圖，錯誤消失，就好像Firefox正在努力做正確的事情一樣困難）。

在3D視圖中看到的突出內容是用於文本對齊，它不會影響bug - see this cut-down version;
縮放被重置，沒有改變;
新的用戶配置文件表現出相同的行爲。

更新5 - 重置火狐

執行火狐復位（按照@arttronics的回答）的bug還在這裏，雖然或許有點不太彈性後。

此前重置，這將調用錯誤
- 清除緩存
- 刷新頁面

復位後，清除緩存和清涼帶來了錯誤的時間約50％。如果我清除緩存，請重新啓動Firefox，返回到頁面 - 每次都仍然存在。

好的我要回答我自己的問題...我還沒有找到解決方案，但由於堆棧溢出社區的興趣和驚人的努力，我似乎很清楚...

這可能是一個難以複製超出特性的問題我的用戶設置的
這是一個不起眼的錯誤只是Firefox 17.0.1清單，顯然固定在Firefox 18
沒有解決方法，不涉及重新設計網站

因此，在利益與其他問題繼續前進，我建議我們提出這個問題重新休息！感謝所有提出意見和建議的人，這是一個非常教育的過程。

來源

2012-12-08 foundry

代碼勝過千言萬語：） – akonsu

AdBlock？ Ghostery的？任何一個擴展都可能導致這個問題。特別是因爲代碼在「安全模式」下工作，禁用所有擴展和工具欄。 – Soumya

@akonsu，需要點代碼！ – foundry

復位火狐

根據您的具體問題，並將所得的意見，這個特定的錯誤僅僅是獨一無二的你，並在一定條件下（新的操作系統用戶配置文件沒有問題，而新的Firefox用戶配置文件有問題）。

然後到復位 Firefox的時間。只需follow these simple steps和您的v17.0.1應該恢復正常。如果您的Firefox安裝有多個配置文件，則改爲follow these other steps。

注意：使用重置功能時，您的書籤，瀏覽記錄，密碼，cookies和網頁表單自動填充信息將被保存。但是，您的擴展程序和主題將被刪除;打開的標籤，窗口和標籤組將不會被保存;並且您的偏好將被重置。

編輯：按我的意見寫的一天：

截至目前我沒有看到有人回答說他們也看到這個標誌天坑的問題，但在租賃火狐18 ETA在這個評論的3個星期內。

話雖如此，解決方案可能只是等到Firefox 18被釋放。

來源

2012-12-14 07:49:25 arttronics

接受！我已經提高了。你一直很有幫助，謝謝你; -j – foundry

如何隔離firefox 17渲染bug

回答

相關問題