Solution de contournement pour le bogue de superposition d'arrière-plans Webkit SVG foreignObject?

Question

Lors de l'intégration de html dans SVG à l'aide de la balise foreignObject, les navigateurs Webkit restituent les arrière-plans des éléments html intégrés derrière les éléments svg. Voir http://code.google.com/p/chromium/issues/detail?id=35545.

Voici un exemple: http://www.mxgraph.com/demo/markup/webkitbg.html La div verte doit être sur le rouge.

Est-ce que quelqu'un connaît une solution de contournement pour ce problème? Peut-être une incantation de z-index et/ou un regroupement d'éléments ou quelque chose dans svg pour tromper webkit en faisant la bonne chose?

Answer 1

Ceci est le bug Webkit 58417, corrigé le 2011-11-10. Le correctif est dans la version 17 de Chromium, qui est actuellement en version bêta à compter du 2012-01-09, et devrait être publié début février. Je ne sais pas quand le correctif atterrira dans Safari, mais heureusement je n'ai pas besoin de le supporter.

Ainsi, la solution semble être « attendre un mois » ...

Answer 2

Je viens d'être frappé par le même problème. Même si le bug est corrigé depuis longtemps dans Chrome, Safari semble être en retard sur le code.

Ma solution consiste à ajouter style="display:inline-block" au premier enfant de la balise foreignObject. Cela semble régler le problème.