有沒有這個移動Safari盒陰影bug的任何解決方法？

更新1：移動Safari瀏覽器適用於iOS 7正確顯示了iPhone盒子陰影，但問題是移動Safari瀏覽器在iPad上與的iOS 7 iOS版Chrome 7也表現在iPad相同的行爲。有沒有這個移動Safari盒陰影bug的任何解決方法？

UPDATE 2：以下是問題的視頻演示：youtube.com/watch?v=eTewrM5vIaQ。

下面的CSS/HTML（JSBin here）開發用於臺式機，火狐和Chrome在Safari 7三維框：

<!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

然而，在移動Safari 7（iOS 7）根本不渲染邊框。

這是一個知道的錯誤？有沒有解決這個問題的方法？或者我錯過了什麼？

來源

2013-12-23 Behrang

無法複製此內容。我已經在Safari和Chrome上使用iOS7在iPad上打開了JSbin，並且'box-shadow'在那裏。 – myajouri

只是爲了確保iPad具有相同的配置：您是否將iOS 7.0.4與iPad 4一起使用？ – Behrang

@myajouri你也可以在橫向模式下測試它嗎？在這裏，它在縱向模式下渲染得很好，但在橫向模式下渲染效果不錯 – Behrang

我將此問題提交給WebKit的bug database以及Apple。確認這確實是一個錯誤，Apple知道它。希望它會在iOS 7的下一次更新中得到修復。

來源

2014-01-14 11:40:15 Behrang

這似乎與使用多個陰影強烈相關。儘管我不能告訴你爲什麼，但考慮到我之前在Mobile Safari上看到的一系列錯誤，看起來並不奇怪）：

作爲解決方法，我建議使用一個陰影並依靠：before和：僞元素添加三角形角後，將使您的形狀看起來像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）。

來源

2013-12-24 13:55:32 myajouri

我得到同樣的問題。我定義了邊界半徑，它在ipad上工作。

border-radius：1px

來源

2014-09-10 10:43:47 user3816704