Android上Chrome中的怪异方块阴影bug

我在Android Chrome上发现了一些非常奇怪的框阴影和文本阴影bug。我的桌面上的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过滤器在其上进行框阴影处理

---

欢迎任何提示

我知道这是一个非常旧的线程，但最后，我得到了解决这个问题的方法

这是使用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);
}

---

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

是的，我也能在我的手机上看到这个bug。这个错误是因为盒子的阴影。我在android上的应用程序中也有类似的错误，因此我是如何回答你的问题的。看看下面的照片，你会看到在应用程序屏幕底部的横条上方有一个奇怪的方框阴影