Webkit SVG foreignObject後臺分層錯誤的解決方法？

Question

當使用foreignObject標籤將html嵌入到SVG內部時，基於webkit的瀏覽器呈現嵌入式html元素背景的svg元素。見http://code.google.com/p/chromium/issues/detail?id=35545。

下面是一個例子：http://www.mxgraph.com/demo/markup/webkitbg.html 綠色的div應該在紅色的頂部。

有沒有人知道這個問題的解決方法？也許有些人諷刺z-index和/或svg中的元素分組或者其他東西來欺騙webkit做正確的事情？

Answer 1

這是webkit bug 58417，修復於2011-11-10。該修復程序位於Chromium版本17中，該版本目前在2012-01-09進行測試，並將於2月初發布。不知道修補程序何時會進入Safari，但幸運的是我不需要支持它。

所以解決方法似乎是「等待一個月」 ......

Answer 2

我剛剛被擊中了同樣的問題。儘管Chrome在很長一段時間內已經修復了bug，但Safari似乎已經遠遠落後於代碼庫。

我的解決方案是將style="display:inline-block"添加到foreignObject標記的第一個孩子。這似乎解決了這個問題。