Bogue de rendu de toile seulement sur Safari et seulement sur iOS5/Lion

Question

Je n'ai jamais vu un bug de navigateur comme celui-ci. Cela se produit uniquement sur une combinaison spécifique de navigateur/plate-forme Safari. J'obtiens des résultats attendus avec Safari 5.1.1 sur iOS4 ou Mac OSX Snow Leopard, mais le bug survient une fois que j'essaie Safari 5.1 ou 5.1.1 uniquement sur Lion ou iOS5.

Cette situation se produit lorsque j'incorpore un élément canvas dans un document svg en ligne via l'élément foreignObject. La toile respecte généralement toutes les transformations svg appliquées à foreignObject et cela fonctionne très bien sur Chrome/Firefox et Safari (iOS4, Snow Leopard). Mais quand j'utilise Safari sur Lion, iOS5 le rendu de la toile sans aucune transformation appliquée. Le rendu de la toile est également au-dessus de tous les SVG donc aucun ordre z n'est respecté non plus.

Qu'est-ce qui aurait pu changer dans Safari dans la même version (5.1/5.1.1) entre les plateformes (Snow Leopard/Lion)?

Toute aide est appréciée pour trouver une solution.

EDIT: On dirait que le moteur de rendu a changé dans Lion et iOS5 de Webkit1 à Webkit2 et a introduit une tonne de bogues. Celui-ci ressemble à celui pertinent: https://bugs.webkit.org/show_bug.cgi?id=68635 Toujours à la recherche d'une solution de contournement ...

Answer 1

Dépend de comment vous reliez votre svg dans le format html. Si c'est un fichier svg externe que vous devez l'intégrer comme celui-ci et servir comme « image/svg + xml »

<embed id="some_id" width="WIDTH" height="HEIGHT" src="youranimation.svg" name="animated_map" type="image/svg+xml"> 

Si vous l'insérez en ligne, je sais que certaines transformations et animations ne fonctionne pas et Je ne connais aucune solution de contournement pour le moment. Je recommanderais de le relier extérieurement comme je l'ai décrit.