Webkit SVG foreignObjectバックグラウンドレイヤリングバグの回避策？

Question

foreignObjectタグを使用してSVG内にhtmlを埋め込むと、Webkitベースのブラウザは埋め込みhtml要素の背景をsvg要素の背後にレンダリングします。 http://code.google.com/p/chromium/issues/detail?id=35545を参照してください。

例は次のとおりです。http://www.mxgraph.com/demo/markup/webkitbg.html 緑色のdivは赤色の上に表示されます。

誰もがこの問題の回避策を知っていますか？たぶん、z-indexの呪文や要素のグループ化、またはWebkitを騙して正しいことをするためのsvgの何らかの呪文ですか？

Answer 1

これは2011-11-11に修正されたWebkitのバグ58417です。この修正はChromiumバージョン17（2012年1月1日現在のベータ版）にあり、2月初旬にリリースされるはずです。フィックスがSafariに着陸するかどうか不明だが、幸いにもそれをサポートする必要はない。

だから、この問題を回避するには、「月待ち」のようです...

Answer 2

私はちょうど同じ問題に見舞われてきました。 Chromeで長い間バグが修正されているにもかかわらず、Safariはコードベースで遅れているようだ。

私の解決策は、foreignObjectタグの最初の子にstyle="display:inline-block"を追加することです。これは問題を解決するようです。