android - 删除 svg 上的小蓝框单击 div

Question

这是 Droid 4 和 Samsung Galaxy S2 上的问题，但在较新的设备和浏览器上没有突出显示。这实际上是针对 Cordova 应用程序的，但它在设备浏览器上的链接 fiddle 中也失败了。我在 StackOverflow 上看过很多帖子，但没有一个建议的属性会删除 touchstart 上的蓝色突出显示。在这种情况下，浅蓝色调出现在字母的左侧。我已尝试使用 Chrome 检查，但没有出现这些设备的检查选项。我见过的唯一解决方案是覆盖一个隐藏的 SVG 并让它处理点击。我宁愿用 CSS 或 javascript 修复它。

这是在这些设备上失败的 CSS 和 fiddle:

       box-shadow: none;
       width: 22%;
       height: 30%;
       position: relative;
       -webkit-user-select: none;
       -moz-user-select: none;
       -ms-user-select: none;
       user-select: none;
       -o-user-select: none;
       outline: 0;
       border: none;
       color: rgba(255, 255, 255, 0);

http://jsfiddle.net/softwareinnovator/06wbqer1/6/

您可以在第一张图片中看到蓝色框，但在第二张图片中看不到。我发现的一个部分解决方案是将 onclick 放在 div 而不是 SVG 上，但随后我在一台设备上获得了完整的 div 高亮显示。我的猜测是更宽的第二个字母将它推到了视线之外。我还发现，如果我不指定高度、宽度和位置，则不会出现该框。

蓝框

没有蓝框

Answer 1

Crosswalk 插件修复了这些问题。我知道这并不能诊断出真正的原因和解决方案，但我必须推荐它。这篇文章帮助我将它正确地添加到元素中。

Build error after adding Crosswalk plugin to a Cordova Android project