Mobile Safari Problèmes de rendu SVG avec raphaeljs

Question

Je travaille sur un graphique animé et interactif utilisant raphael que j'ai besoin de bien travailler sur l'iPhone. J'ai 2 problèmes de rendu mineurs avec lesquels je me bats. Le premier est que chaque fois que vous cliquez sur un élément svg auquel est associé un gestionnaire de clic, le safari mobile dessine une zone grise transparente autour de celui-ci pour indiquer ce qui a été cliqué. C'est la même chose quand vous cliquez sur un lien hypertexte. La boîte grise est très laide dans cette situation. Y a-t-il une propriété css pour dire au safari mobile de ne pas le faire?

Le deuxième problème concerne les animations. Pour toute animation, le safari mobile ajoute une bordure noire laide à la toile svg. Ce n'est visible que lorsqu'une animation est en cours, et elle n'est visible que sur les bords droits du canevas. Une idée de comment résoudre ce problème?

Ceci a été pris en utilisant une copie & pâte de l'une des démos sur la page de raphael, juste avec un fond blanc.

Answer 1

This article a quelques conseils utiles, à savoir ...

Désactivation du flash de sélection:

Transforme là-bas est un moyen de désactiver cette grâce à l'utilisation de la propriété CSS WebKit -webkit- tap-highlight-couleur, et la mise en alpha de la couleur à 0, dans mon code Javascript le tour est joué:

document.documentElement.style.webkitTapHighlightColor = "rgba(0,0,0,0)"; 

et Disablin g la fenêtre contextuelle "action":

La deuxième chose que je devais désactiver est la fenêtre contextuelle "action" qui apparaît si vous maintenez enfoncé le contenu de l'UIWebView pendant quelques secondes. Ceci est également contrôlé par une propriété CSS appelé -webkit-touch-callout et du paramètre « none » dans ce cas, le tour est joué:

document.documentElement.style.webkitTouchCallout = "none";