CSS mobile: box-shadow doesn't work correctly

Question

When I've opened my site in chrome mobile v48, I've found that box-shadow: 1px property behaves weird: the width of the shadow is floating from side to side and ain't the same. I assume it because of fractional device pixel ratio 1.5:

The next code fragment does not always gives to me required 1px shadow but it is floating around 1-3px sometimes on mobile browsers:

div {
   margin: 10px;
   height: 10px;
   padding: 20px;
   width: 40%;
   box-shadow: 0 0 1px #000;
}
...
<div></div>
<div></div>

JSFiddle

I've tried to use -webkit prefix but nothing has been changed. Using an alternative unit em instead of px one brings nothing as well as fractional values like 0.5px.

The viewport meta tag seems not enough:

<meta name="viewport" content="width=device-width, initial-scale=1">

How to fix this and let box-shadow property to display correctly on mobile browsers?

Answer 1

Are you using any kind of CSS reset? That might help you out.

Have you tried using media queries, something like this:

@media(-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { 
    /* CSS stuff here */
}