Android 版 Chrome 中的奇怪框阴影错误

Question

我在使用 box-shadow 和 text-shadow Android Chrome 时遇到了一些非常奇怪的错误。我桌面上的 Chrome 工作正常，但在 Android 上，它显示出奇怪的阴影效果。查看此屏幕截图以更好地了解发生了什么：

如您所见，Android 上的 Chrome 以不同的方式呈现 text-shadow 和 box-shadow。这是我用于菜单标签和汉堡菜单的代码示例：

#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 过滤器在它上面做 box-shadow。

欢迎任何提示！

Answer 1

我知道这是一个非常古老的线程，但最后我解决了这个问题。

这是用 CSS 放置盒子阴影的正确方法。它需要 6 个值插入可以保留可选。

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

同样的事情也适用于文本阴影。这对我有用希望对你也有用。