Проблемы с рендерингом мобильных Safari SVG в Raphaeljs

Question

Я работаю над анимированным интерактивным графиком, используя Raphael , который мне нужен, чтобы хорошо работать на iPhone. У меня 2 незначительные проблемы с рендерингом, с которыми я борюсь.

Во-первых, всякий раз, когда вы нажимаете на элемент svg, к которому прикреплен обработчик кликов, мобильное сафари рисует прозрачную серую рамку вокруг него, чтобы указать, что было нажато. Это то же самое, что и при нажатии на гиперссылку. Серая коробка очень уродлива в этой ситуации. Есть ли свойство css, чтобы запретить мобильному сафари этого делать?

Вторая проблема связана с анимацией. Во время любой анимации мобильное сафари добавляет уродливую черную рамку к холсту SVG. Он виден только во время анимации и виден только по нижнему и правому краям холста. Есть идеи как это исправить?

Это было сделано с использованием копирования и вставки одной из демонстраций на странице Рафаэля, просто с белым фоном.

Answer 1

В этой статье есть несколько полезных советов, а именно ...

Отключение вспышки выбора:

Оказывается, есть способ отключить это, используя CSS-свойство WebKit -webkit-tap-highlight-color, и установив альфа цвета на 0, в моем коде Javascript добивается цели:

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

и отключение всплывающего окна «Действие»:

Второе, что мне нужно было отключить, - это всплывающее окно «action», которое появляется, если вы касаетесь и удерживаете содержимое UIWebView в течение нескольких секунд. Это также контролируется с помощью свойства CSS, называемого -webkit-touch-callout, и установка в этом случае «none» делает свое дело:

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