Android 上 Chrome 中奇怪的 box-shadow 错误答案

【问题标题】：Weird box-shadow bug in Chrome on AndroidAndroid 上 Chrome 中奇怪的 box-shadow 错误
【发布时间】：2016-01-27 08:16:09
【问题描述】：

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

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

#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 处理。

欢迎任何提示！

【问题讨论】：

是的，我也可以在我的手机中看到这个错误。该错误是因为盒子阴影。我在我们的安卓应用程序中有类似的错误，因此我是如何得出你的问题的。看看下面的照片，你会看到应用屏幕底部栏上方的框阴影出现奇怪的步进s23.postimg.org/byzouu8cb/Screenshot_2016_01_08_02_40_41.png

标签： android css google-chrome

【解决方案1】：

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

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

box-shadow: horizontal vertical blur spread color inset;

我知道 blur 和 spread 是可选的，但在少数浏览器中，它们需要该值。

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

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

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

【讨论】：