CODEWITHSUNDEEP
webkitcss
Behrang Saeedzadeh
Behrang Saeedzadeh

Reputation: 47913

Are there any workarounds for this Mobile Safari box-shadow bug?

UPDATE 1: Mobile Safari for iOS 7 shows the box shadows properly on iPhone, but the problem is with Mobile Safari on iPad with iOS 7. Chrome for iOS 7 also exhibits the same behavior on iPad.

UPDATE 2: Here's a video demonstration of the issue: youtube.com/watch?v=eTewrM5vIaQ.

The following CSS/HTML (JSBin here) creates a 3D box 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,
            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>

Similar to this:

3D Box

However in Mobile Safari 7 (iOS 7) it doesn't render the borders at all.

Is this a know bug? Are there any workarounds for this issue? Or am I missing something?

Upvotes: 0

Views: 2262

Answers (3)

user3816704
user3816704

Reputation: 1

I was getting same problem. I defined the border radius and it worked on ipad.

border-radius:1px

Upvotes: 0

Behrang Saeedzadeh
Behrang Saeedzadeh

Reputation: 47913

I submitted this issue to WebKit's bug database as well as Apple's. It is confirmed that this is indeed a bug and Apple is aware of it. Hopefully it will be fixed in the next update to iOS 7.

Upvotes: 1

myajouri
myajouri

Reputation: 3114

This seems to be strongly related to using multiple shadows. Even though I can't tell you why, it doesn't seem strange at all given the range of bugs I have seen before on Mobile Safari :)

As a workaround, I suggest using one shadow and relying on :before and :after pseudo elements to add the triangle corners that will make your shape look 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

The one thing to note is that this works better if your shadow offset was an even number (I have changed the shadow offset to 16px).

Upvotes: 0

Related Questions