CSS mobile: box-shadow non funziona correttamente

Question

Quando ho aperto il mio sito in chrome mobile v48, ho riscontrato che la proprietà box-shadow: 1px si comporta in modo strano: la larghezza dell'ombra fluttua da un lato all'altro e ain ' lo stesso Presumo perché frazionario rapporto pixel dispositivo 1.5:

Il frammento di codice successiva non dà sempre mi richiesto 1px ombra ma è mobile attorno 1-3px volte su browser mobili:

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

JSFiddle

Ho provato a utilizzare il prefisso -webkit ma non è stato modificato nulla. Usando un'unità alternativa em invece di px non si hanno valori uguali a quelli frazionari come 0.5px.

Il viewport meta tag sembra non basta:

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

Come risolvere questo problema e lasciare che box-shadow proprietà per visualizzare correttamente su browser per dispositivi mobili?

Answer 1

Stai utilizzando qualsiasi tipo di ripristino CSS? Questo potrebbe aiutarti.

Hai provato a usare media queries, qualcosa di simile:

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