移动Safari SVG渲染问题与raphaeljs

我正在使用raphael制作一个动画的交互式图形,我需要在iPhone上运行良好.我有2个轻微的渲染问题,我正在努力.

首先,无论何时单击附加了单击处理程序的svg元素,移动safari都会在其周围绘制一个透明的灰色框以指示单击的内容.这与点击超链接时的功能相同.在这种情况下,灰盒子非常难看.是否有任何css属性告诉移动野生动物园不这样做？

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

这是在raphael的页面上使用其中一个演示的复制和粘贴拍摄的,只有白色背景.

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

禁用选择闪光:

事实证明有一种方法可以通过使用WebKit CSS属性-webkit-tap-highlight-color来关闭它,并将颜色的alpha设置为0,在我的Javascript代码中可以解决这个问题:

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

并禁用"操作"弹出窗口:

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

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