移动Safari SVG渲染问题与raphaeljs [英] Mobile Safari SVG rendering issues with raphaeljs

问题描述

我正在使用 raphael 制作动画互动图表，我需要在iPhone上运作良好。我有2个小的渲染问题，我正在努力。

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.

第一个是每当你点击附加了点击处理程序的svg元素时，移动版Safari会绘制一个它周围的透明灰色框表示点击了什么。这与点击超链接时的功能相同。在这种情况下，灰盒子非常难看。是否有任何css属性告诉移动safari不要这样做？

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?

第二个问题是动画。在任何动画的持续时间，移动safari为svg画布添加一个丑陋的黑色边框。它只在动画正在进行时才可见，并且只在底部和底部可见。画布的右边缘。知道如何解决这个问题吗？

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?

这是使用副本&在raphael的页面上粘贴其中一个演示，只有白色背景。

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

推荐答案

这篇文章有一些有用的提示，即......

This article has some useful tips, namely...

禁用选择闪光灯：

原来有办法通过使用关闭它WebKit CSS属性-webkit-tap-highlight-color，并将颜色的alpha设置为0，在我的Javascript代码中可以解决问题：

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)";

并禁用操作弹出窗口：

我需要禁用的第二件事是如果你点击并按住UIWebView的内容几秒钟就会出现动作弹出窗口。这也是通过一个名为-webkit-touch-callout的CSS属性来控制的，在这种情况下将其设置为none可以解决这个问题：

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";

这篇关于移动Safari SVG渲染问题与raphaeljs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！