Box-Shadow bug on iPhone 6 plus with iOS 8.3 and 8.4 beta

index.html

<div class="box">Setting the "spread" value in box-shadow disables the rendering of box-shadow on iphone 6 plus</div>

<div class="box1">Setting a background-color with rgba and an alpha value other than 1 disables the rendering of box-shadow on iphone 6 plus</div>

<div class="box2">Box-shadow should be displayed as it should</div>

<p>If you need both values and still want to have a box-shadow, setting border-radius: .1px; is the workaround you will need.</p>

<p>Tested on iphone 6 plus and iOS 8.3 and 8.4 beta</p>

style.css

.box {
  height: 100px;
  width: 80%;
  box-shadow: 2px 2px 0 1px rgba(0,0,0,.5);
  background: red;
  margin-bottom: 1em;
  position: relative;
}

.box1 {
  height: 100px;
  width: 80%;
  box-shadow: 2px 2px 0 rgba(0,0,0,.5);
  background: rgba(255,0,0,.9);
  margin-bottom: 1em;
  position: relative;
}

.box2 {
  height: 100px;
  width: 80%;
  box-shadow: 2px 2px 0 rgba(0,0,0,.5);
  background: rgba(255,0,0,1);
  margin-bottom: 1em;
  position: relative;
}

wBVjgX.markdown

wBVjgX

A Pen by Fabian Tempel on CodePen.

License.