javascript - raphaeljs 的 Mobile Safari SVG 渲染问题

Question

我正在使用 raphael 制作动画交互式图表我需要在 iPhone 上正常工作。我遇到了 2 个小的渲染问题。

首先，无论何时单击附加有单击处理程序的 svg 元素，移动版 Safari 都会在其周围绘制一个透明的灰色框以指示单击的内容。这与您单击超链接时所做的相同。在这种情况下，灰色框非常难看。是否有任何 css 属性告诉移动 safari 不要这样做？

第二个问题是动画。对于任何动画的持续时间，移动版 safari 都会向 svg Canvas 添加丑陋的黑色边框。它仅在动画进行时可见，并且仅在 Canvas 的底部和右边缘可见。知道如何解决这个问题吗？

这是使用 raphael 页面上的一个演示的复制和粘贴拍摄的，只有白色背景。

Answer 1

This article有一些有用的提示，即...

禁用选择闪光灯:

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

并禁用“操作”弹出窗口:

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