Problemy z renderowaniem SVG w przeglądarkach Safari z raphaeljs

Question

Pracuję nad animowanym, interaktywnym wykresem przy użyciu raphael, który powinien dobrze działać na telefonie iPhone. Mam 2 drobne problemy z renderowaniem, z którymi walczę.

Po pierwsze, za każdym razem, gdy klikniesz element svg z dołączoną obsługą kliknięcia, mobilne safari rysuje przezroczyste, szare pole wokół niego, aby wskazać, co zostało kliknięte. Podobnie jest z kliknięciem hiperłącza. Szara skrzynka jest bardzo brzydka w tej sytuacji. Czy jest jakaś właściwość CSS, aby powiedzieć mobilnemu safari, że tego nie robi?

Drugi problem dotyczy animacji. Przez cały czas trwania animacji mobilne safari dodaje brzydką czarną granicę do płótna svg. Jest widoczny tylko podczas trwania animacji i jest widoczny tylko na dole z prawej krawędzi płótna. Jakiś pomysł jak to naprawić?

To zostało zrobione za pomocą kopii jednego z demów na stronie Rafaela, tylko na białym tle.

Answer 1

This article ma kilka przydatnych wskazówek, a mianowicie ...

Wyłączenie lampy błyskowej wybór:

okazuje istnieje sposób, aby to wyłączyć poprzez wykorzystanie właściwości CSS WebKit -webkit- Tap-highlight-color oraz ustawianie alfa koloru na 0, w moim kodu JavaScript załatwia sprawę:

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

i Disablin g wyskakujące okno "action":

Drugą rzeczą, którą trzeba wyłączyć, jest wyskakujące okienko "action", które pojawia się po dotknięciu i przytrzymaniu zawartości UIWebView przez kilka sekund. To jest także kontrolowana przez właściwości CSS o nazwie -webkit-touch-objaśnienie i ustawienie, że na „None” w tym przypadku nie trick:

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