8

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:

enter image description here

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?

dippas
  • 58,591
  • 15
  • 114
  • 126
WildDev
  • 2,250
  • 5
  • 35
  • 67

1 Answers1

4

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 */
}
dippas
  • 58,591
  • 15
  • 114
  • 126
  • Will take a look of CSS reset, thanks. Media queries are not useful for me yet while I have no idea what to put in. The minimal width unit like `1px` gives unexpectable result. – WildDev Feb 29 '16 at 00:05
  • it's `device-width` in combination with `initial-scale=1` – WildDev Feb 29 '16 at 00:10
  • have you used shadows for your mobile site versions? – WildDev Feb 29 '16 at 13:47
  • yes and your code works fine, having CSS pixel ratio 3, device aspect ratio 0.56 – dippas Feb 29 '16 at 13:49
  • the only browser which renders the shadows properly is FireFox. Seems like it's a bug in rest major browsers. epic – WildDev Feb 29 '16 at 21:22
  • Ive tested in chrome – dippas Feb 29 '16 at 21:23
  • Indeed, with pixel ratio `3` it works fine. So, there're no workarounds at the moment except of disabling `box-shadow` or switching to `border` one for fractional pixel ratio devices using media-queries you have specified due it's 99% a bug. – WildDev Mar 06 '16 at 20:21