LATEST UPDATE: Box shadows are displaying correctly on iPhone using Mobile Safari for iOS 7, but there seems to be an issue with iPad using the same browser. Chrome for iOS 7 is also affected by this problem when used on an iPad.
UPDATE 2: To see a video demonstration of the problem, click here: youtube.com/watch?v=eTewrM5vIaQ.
The CSS/HTML code below (provided in JSBin here) creates a 3D box that works well in Safari 7 for desktop, Firefox, and Chrome:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style type="text/css">
body {
text-align: center;
margin-top: 100px;
}
.coming-back {
display: inline-block;
padding: 100px;
background-color: rgb(31, 219, 153);
-webkit-box-shadow:
15px 15px 0 0 #2d9a74,
14px 14px 0 0 #2d9a74,
13px 13px 0 0 #2d9a74,
...
1px 1px 0 0 #2d9a74;
-moz-box-shadow:
...
1px 1px 0 0 #2d9a74;
box-shadow:
...
1px 1px 0 0 #2d9a74;
color: #fff;
font-family: "rooney-sans",sans-serif;
font-style: italic;
font-size: 96px;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
body {
margin-top: 50px;
}
.coming-back {
padding: 50px;
font-size: 64px;
}
}
@media screen and (max-width: 767px) {
body {
margin-top: 50px;
}
.coming-back {
padding: 50px;
font-size: 64px;
}
}
</style>
</head>
<body>
<div class="coming-back">
Coming back soon!
</div>
</body>
</html>
Here's another example:
However, the borders are not visible at all in Mobile Safari 7 on iOS 7.
Is this a known bug? Any suggestions for fixing this issue? Or could it be something I'm overlooking?