Skip to content

Instantly share code, notes, and snippets.

@trilodge

trilodge/index.html

Created April 15, 2015 14:10
Show Gist options
  • Save trilodge/5e5fd15264e32bd6d84c to your computer and use it in GitHub Desktop.
Save trilodge/5e5fd15264e32bd6d84c to your computer and use it in GitHub Desktop.
Download ZIP
Box-Shadow bug on iPhone 6 plus with iOS 8.3 and 8.4 beta
Raw
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>
Raw
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment