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.
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.
Share Improve this question edited Sep 22, 2015 at 1:06 Undo♦ 25.7k38 gold badges112 silver badges131 bronze badges asked Oct 10, 2009 at 22:13 BryanBryan 3,5026 gold badges28 silver badges20 bronze badges 1- I had to remove the image from your post because ImageShack has deleted it and replaced it with advertising. See meta.stackexchange./q/263771/215468 for more information. If possible, it would be great for you to re-upload them. Thanks! – Undo ♦ Commented Sep 22, 2015 at 1:06
1 Answer
Reset to default 8This 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";