Question

更新1 ：适用于iOS 7的Mobile Safari在 iPhone 上正确显示了框阴影，但问题出在 iPad上的Mobile Safari 上iOS 7.适用于iOS 7的Chrome在iPad上也表现出相同的行为。

更新2 ：以下是该问题的视频演示：youtube.com/watch?v=eTewrM5vIaQ。

以下CSS / HTML（JSBin here）在Safari 7中为桌面，Firefox和Chrome创建了一个3D框：

<!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,
            12px 12px 0 0 #2d9a74,
            11px 11px 0 0 #2d9a74,
            10px 10px 0 0 #2d9a74,
            9px 9px 0 0 #2d9a74,
            8px 8px 0 0 #2d9a74,
            7px 7px 0 0 #2d9a74,
            6px 6px 0 0 #2d9a74,
            5px 5px 0 0 #2d9a74,
            4px 4px 0 0 #2d9a74,
            3px 3px 0 0 #2d9a74,
            2px 2px 0 0 #2d9a74,
            1px 1px 0 0 #2d9a74;
      -moz-box-shadow: 
            15px 15px 0 0 #2d9a74,
            14px 14px 0 0 #2d9a74,
            13px 13px 0 0 #2d9a74,
            12px 12px 0 0 #2d9a74,
            11px 11px 0 0 #2d9a74,
            10px 10px 0 0 #2d9a74,
            9px 9px 0 0 #2d9a74,
            8px 8px 0 0 #2d9a74,
            7px 7px 0 0 #2d9a74,
            6px 6px 0 0 #2d9a74,
            5px 5px 0 0 #2d9a74,
            4px 4px 0 0 #2d9a74,
            3px 3px 0 0 #2d9a74,
            2px 2px 0 0 #2d9a74,
            1px 1px 0 0 #2d9a74;
      box-shadow: 
            15px 15px 0 0 #2d9a74,
            14px 14px 0 0 #2d9a74,
            13px 13px 0 0 #2d9a74,
            12px 12px 0 0 #2d9a74,
            11px 11px 0 0 #2d9a74,
            10px 10px 0 0 #2d9a74,
            9px 9px 0 0 #2d9a74,
            8px 8px 0 0 #2d9a74,
            7px 7px 0 0 #2d9a74,
            6px 6px 0 0 #2d9a74,
            5px 5px 0 0 #2d9a74,
            4px 4px 0 0 #2d9a74,
            3px 3px 0 0 #2d9a74,
            2px 2px 0 0 #2d9a74,
            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>

与此类似：

3D Box

然而，在Mobile Safari 7（iOS 7）中，它根本不渲染边框。

这是一个知道错误吗？这个问题有没有解决方法？或者我错过了什么？

Answer 1

这似乎与使用多个阴影密切相关。虽然我不能告诉你原因，但考虑到我之前在Mobile Safari上看到的各种错误，它似乎并不奇怪：）

作为一种解决方法，我建议使用一个阴影并依赖于：before和：after伪元素添加三角形角落，使你的形状看起来像3D。

.coming-back {
  position: relative;
  box-shadow: 16px 16px #2d9a74;

  /* other styles... */
}    

.coming-back:before,
.coming-back:after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border: 8px solid transparent;      /* border width is 1/2 shadow offset */
}

.coming-back:before {
  top: 0;
  left: 100%;
  border-left-color: #2d9a74;
  border-bottom-color: #2d9a74;
}

.coming-back:after {
  top: 100%;
  left: 0;
  border-top-color: #2d9a74;
  border-right-color: #2d9a74;
}

DEMO：http://jsbin.com/UhelOfic/2

需要注意的一点是，如果阴影偏移是偶数（我已将阴影偏移更改为16px），则效果会更好。

Answer 2

我已将此问题提交给WebKit的bug database以及Apple的。确认这确实是一个错误，Apple已经意识到这一点。希望它能在iOS 7的下一次更新中修复。

Answer 3

我遇到了同样的问题。我定义了边界半径，它在ipad上工作。

边界半径：1px的

这个Mobile Safari box-shadow bug有没有解决方法？

3 个答案: