A strange error appeared in the Chrome browser on Android

Question

I got some kind of weird bug with the Android Chrome shadow and text tag. Chrome on my desktop works fine, but on Android it shows a weird shadow effect. Take a look at this screenshot to better understand what is happening:

As you can see, Chrome on Android casts both a shadow shadow and a window shadow differently. Here is an example of the code that I use for the menu label and the hamburger 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);
}

Has anyone seen such an error? Is there any workaround for this?

One observation: the logo on the left is svg graphics. It uses the svg filter to make a shadow on it.

Any advice is appreciated!

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

. , , .