Mobile Safari Problemas de representación SVG con raphaeljs

Question

Estoy trabajando en un gráfico animado e interactivo usando raphael que necesito para trabajar bien en el iPhone. Tengo 2 problemas menores de renderizado con los que estoy luchando.

La primera es que cada vez que se hace clic en un elemento svg que tiene asociado un manejador de clics, safari móvil dibuja un recuadro gris transparente alrededor para indicar en qué se hizo clic. Es lo mismo que hace cuando hace clic en un hipervínculo. La caja gris es muy fea en esta situación. ¿Hay alguna propiedad css para decirle a Safari móvil que no haga eso?

El segundo problema es con animaciones. Durante la duración de cualquier animación, el safari móvil agrega un borde negro feo al lienzo svg. Solo es visible mientras una animación está en progreso, y solo está visible en la parte inferior & en los bordes derechos del lienzo. ¿Algúna idea de cómo arreglar esto?

Esto fue tomado usando una copia & pegado de una de las demos en la página de raphael, solo con un fondo blanco.

Answer 1

This article tiene algunos consejos útiles, a saber ...

La desactivación del flash de la selección:

Resulta que hay una manera de desactivar esta opción a través del uso de la propiedad CSS WebKit -webkit- -toque culminante color y ajuste de la alfa del color a 0, en mi código Javascript hace el truco:

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

y Disablin g la "acción" emergente:

La segunda cosa que necesitaba para desactivar la ventana emergente es “acción” que aparece si pulsa y mantiene pulsado el contenido de la UIWebView durante unos segundos. Esto también se controla a través de una propiedad CSS llamada webkit-touch-llamada, y establecer que a “ninguno” en este caso es el truco:

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