爲SVG禁用chrome用戶代理樣式表*選擇器？

我最近發現，Chrome的應用下列CSS規則應用於所有SVG元素（無論它們是如何嵌入[對象，嵌入，iframe或內聯）：爲SVG禁用chrome用戶代理樣式表*選擇器？

* { 
    -webkit-transform-origin-x: 0px; 
    -webkit-transform-origin-y: 0px; 
    -webkit-transform-origin-z: initial; 
}

運行CSS選擇器探查，在*選擇器是迄今爲止最大的性能命中。這似乎會導致滾動等，感覺與頁面中的幾個非常複雜的SVG呆滯。

我的問題是：我該如何解決這個問題？有沒有辦法刪除這條規則（不覆蓋，因爲在這種情況下，這會導致選擇器性能更差）？

也許這是由Chrome瀏覽器小組的監督，或許它的存在的原因，我不明白（獎勵積分的人誰也可以解釋爲什麼它的存在，如果我錯了，希望它消失）。

也許我也在錯誤地閱讀分析器。這裏有一個截圖（刪除不相關的選擇器）。

* selector in Chrome CSS profiler

我知道我問了很多的問題在這裏，但有一個原因（除了它根本還沒有實現），爲什麼不填充「源」列？

來源

2012-12-05 lakenen

您確定緩慢是因爲選擇器，而不是因爲Chrome渲染SVG時速度慢嗎？ – cimmanon

根本不是。它可能就是這樣，但我無法測試，因爲我無法禁用用戶代理樣式表。 – lakenen

您意味着選擇器只針對SVG，但這是不可能的。從轉換源（https://developer.mozilla.org/en-US/docs/CSS/transform-origin）的目的來看，每個元素都有一個邏輯默認狀態是合適的。 – cimmanon

Source列未填充，因爲配置文件中列出的特定規則沒有源文件。這是由於用戶代理樣式表中存在的規則，這些規則在Chrome代碼中被「硬編碼」，並且不符合實際資源。

現在，嘗試切換到絕對時間（配置文件視圖下方狀態欄中的%按鈕），然後查看實際需要多長時間（以毫秒爲單位）。我敢打賭，除非您將HTML5規範視爲單個頁面，否則您會感到驚訝。

據我所知，-webkit-transform-origin用這種方法來強制整個頁面的硬件加速合成。

來源

2012-12-05 19:38:48

甚至對於我自己的樣式規則（我已經在圖像中刪除了，但我可以保證你在那裏），源列未填充。 – lakenen

確認，謝謝報告... https://bugs.webkit.org/show_bug.cgi?id=104225提交。 –

只能通過使用命名空間，至少在XHTML（不知道對「正常」的HTML）限制規則HTML：

@namespace html 'http://www.w3.org/1999/xhtml' 
html|* { 
    -webkit-transform-origin-x: 0px; 
    -webkit-transform-origin-y: 0px; 
    -webkit-transform-origin-z: initial; 
}

（上Tinkerbin比較另一個例子）。

對於「正常」的HTML，使用not()選擇與SVG命名空間應該工作：

@namespace svg 'http://www.w3.org/2000/svg'; 
*:not(svg|*) { 
    -webkit-transform-origin-x: 0px; 
    -webkit-transform-origin-y: 0px; 
    -webkit-transform-origin-z: initial; 
}

我不知道，不過，這是否會提高性能。

來源

2012-12-05 19:51:18

我認爲這不會有幫助，因爲我無法訪問Chrome應用於SVG的用戶代理樣式表。如果我在我自己的樣式表中應用此規則，它似乎沒有什麼區別。 – lakenen

爲SVG禁用chrome用戶代理樣式表*選擇器？

回答

相關問題