Mobile Safari SVG rendering issues with raphaeljs

Question

I am working on an animated, interactive graph using raphael that I need to work well on the iPhone. I have 2 minor rendering issues that I'm struggling with.

The first is that whenever you click on an svg element that has a click handler attached, mobile safari draws a transparent gray box around it to indicate what was clicked. It's the same thing it does when you click on a hyperlink. The gray box is very ugly in this situation. Is there any css property to tell mobile safari not to do that?

The second issue is with animations. For the duration of any animation, mobile safari adds an ugly black border to the svg canvas. It's only visible while an animation is in progress, and it is only visible on the bottom & right edges of the canvas. Any idea how to fix this?

This was taken using a copy & paste of one of the demos on raphael's page, just with a white background.

Answer 1

This article has some useful tips, namely...

Disabling the selection flash:

Turns out there is a way to turn this off through the use of the WebKit CSS property -webkit-tap-highlight-color, and setting the alpha of the color to 0, in my Javascript code does the trick:

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

and Disabling the "action" pop-up:

The second thing I needed to disable is the “action” popup that appears if you tap and hold the contents of the UIWebView for a few seconds. This is also controlled through a CSS property called -webkit-touch-callout, and setting that to “none” in this case does the trick:

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