problemi di rendering di Safari Mobile SVG con raphaeljs

Question

sto lavorando su un animato, grafico interattivo utilizzando raphael che ho bisogno di lavorare bene su iPhone. Ho 2 problemi di rendering minori con cui sto lottando.

La prima è che ogni volta che si fa clic su un elemento SVG che ha un gestore di clic attaccato, Safari Mobile disegna una scatola grigia trasparente intorno ad esso per indicare ciò che è stato fatto clic. È la stessa cosa che fa quando fai clic su un collegamento ipertestuale. La scatola grigia è molto brutta in questa situazione. C'è qualche proprietà css per dire a mobile safari di non farlo?

Il secondo problema è con animazioni. Per tutta la durata di qualsiasi animazione, Safari mobile aggiunge un brutto bordo nero alla tela svg. È visibile solo mentre è in corso un'animazione, ed è visibile solo in basso a destra della tela. & Qualche idea su come risolvere questo problema?

Questo è stato preso utilizzando una copia & incolla di una delle demo sulla pagina di Raffaello, solo con uno sfondo bianco.

Answer 1

This article ha alcuni consigli utili, vale a dire ...

Disabilitare il flash selezione:

scopre che c'è un modo per disattivare questo attraverso l'uso della proprietà WebKit CSS -webkit- Tap-highlight-colore, e impostando l'alfa del colore a 0, nel mio codice Javascript fa il trucco:

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

e Disablin g il pop-up "action":

La seconda cosa che dovevo disabilitare è il popup "azione" che appare se si tiene premuto il contenuto di UIWebView per alcuni secondi. Questo è controllato anche attraverso una proprietà CSS chiamata -webkit-touch-richiamo, e l'impostazione che a “nessuno” in questo caso fa il trucco:

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