1

When embedding html inside of SVG using the foreignObject tag, webkit based browsers render the backgrounds of the embedded html elements behind the svg elements. See http://code.google.com/p/chromium/issues/detail?id=35545 .

Here's an example : http://www.mxgraph.com/demo/markup/webkitbg.html The green div should be on top of the red.

Does anyone know of a workaround for this issue? Maybe some incantation of z-index and/or grouping of elements or something in svg to fool webkit into doing the right thing?

yarrumretep
  • 101
  • 1
  • 9

2 Answers2

3

This is webkit bug 58417, fixed on 2011-11-10. The fix is in Chromium version 17, which is currently in beta as of 2012-01-09, and should be released in early February. Not sure when the fix will land in Safari, but luckily I don't need to support it.

So the workaround seems to be "wait a month"...

Dirk Bergstrom
  • 2,905
  • 2
  • 23
  • 15
0

I've just been hit by the same issue. Even though the bug is fixed since a long time in Chrome, Safari seems to be ages behind with the codebase.

My solution is to add style="display:inline-block" to the first child of the foreignObject tag. This seems to fix the problem.

Emil
  • 714
  • 1
  • 5
  • 10