Skip to content

Instantly share code, notes, and snippets.

@trilodge

trilodge/index.html

Created Apr 15, 2015
Embed
What would you like to do?
Box-Shadow bug on iPhone 6 plus with iOS 8.3 and 8.4 beta
<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>
.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