Android上的Chrome中奇怪的盒子阴影错误

Question

我的盒子阴影和文字阴影Android Chrome有一些非常奇怪的错误。我桌面上的Chrome工作正常，但在Android上，它显示出一种奇怪的阴影效果。请查看此屏幕截图，以便更好地了解正在进行的操作：

正如您所看到的，Android上的Chrome会以不同的方式渲染文本阴影和框阴影。以下是我用于菜单标签和汉堡菜单的代码示例：

#menu-toggle{
    position: fixed;
    top: 17px;
    right: 13px;
    z-index: 120;
    padding: 0;
    color: #fff;
    font-family: 'Katahdin Round',Arial,Helvetica,sans-serif;
    border: none;
    background-color: transparent;
    outline: 0;
    text-shadow: 0 0 7px rgba(17,17,17,.3);
}
#menu-toggle .bottom, #menu-toggle .middle, #menu-toggle .top{
    position: absolute;
    left: 0;
    width: 21px;
    height: 3px;
    background-color: #fff;
    -webkit-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
    -webkit-box-shadow: 0 0 7px rgba(17,17,17,.3);
            box-shadow: 0 0 7px rgba(17,17,17,.3);
}

有没有人见过这种虫子？这个有解决方法吗？

一个观察结果：左侧的徽标是svg图形。它使用svg过滤器对其进行盒子阴影。

欢迎任何提示！

Answer 1

我知道这是一个非常古老的主题，但最后，我找到了解决这个问题的方法。

这是使用CSS放置框阴影的正确方法。它需要6个值inset可选。

box-shadow: horizontal vertical blur spread color inset;

我知道模糊和传播是可选的，但在很少的浏览器中，它们需要这个值。

一个简单的例子，它适用于所有浏览器。

target {
  -webkit-box-shadow: 0px 0px 7px 0px rgba(17,17,17,.3);
     -moz-box-shadow: 0px 0px 7px 0px rgba(17,17,17,.3);
          box-shadow: 0px 0px 7px 0px rgba(17,17,17,.3);
}

同样适用于文本阴影。这对我有用，希望也适合你。