[Webkit-unassigned] [Bug 126151] New: Mobile Safari for iOS 7 (iPad 4) does not render multiple box shadows in some cases

Mon Dec 23 00:26:31 PST 2013

https://bugs.webkit.org/show_bug.cgi?id=126151

           Summary: Mobile Safari for iOS 7 (iPad 4) does not render
                    multiple box shadows in some cases
           Product: WebKit
           Version: 525.x (Safari 3.2)
          Platform: Other
               URL: http://jsbin.com/ohErOtuM/1
        OS/Version: Other
            Status: NEW
          Severity: Major
          Priority: P2
         Component: CSS
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: behrangsa at gmail.com

Created an attachment (id=219896)
 --> (https://bugs.webkit.org/attachment.cgi?id=219896&action=review)
Rendering in Safari 7 under OS X Mavericks

In Safari for iOS 7 (iPad 4), the following HTML/CSS (JSBin here: http://jsbin.com/ohErOtuM/1) does not render any borders around the .coming-soon div.

I have attached three screenshots that show how it is rendered in Safari 7 for OS X, Safari 7 for iOS 7 (iPad 4), and Safari 7 for iOS 7 (iPhone).

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

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.