Problems displaying SVG for mobile Safari using raphaeljs

Question

I am working on animated interactive graphics using raphael that I need to work well on the iPhone. I have two minor processing issues I'm struggling with.

Firstly, whenever you click on an svg element with an attached click, the mobile safari draws a transparent gray square around it to indicate what was clicked. This is the same as clicking a hyperlink. In this situation, the gray box is very ugly. Is there any css property to tell mobile safari about this?

The second problem is related to animation. Throughout any animation, mobile safari adds an ugly black border to svg canvas. It is displayed only during animation, and it is displayed only on the bottom and right edges of the canvas. Any idea how to fix this?

This was done using a copy and paste of one of the demos on the raphael page, only on a white background.

Answer 1

This article has some helpful tips, namely ...

Mute flash selection:

Turns out there is a way to disable this using the WebKit CSS -webkit-tap-highlight-color property and set the alpha color to 0, the trick is done in my Javascript code:

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

and disabling the action popup:

, , - "", , UIWebView . CSS-, -webkit-touch-callout, "none" :

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