Bug 126151

Summary: Mobile Safari for iOS 7 (iPad 4) does not render multiple box shadows in some cases
Product: WebKit Reporter: Behrang Saeedzadeh <behrangsa>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED MOVED    
Severity: Major CC: bfulgham, simon.fraser
Priority: P2 Keywords: InRadar
Version: 525.x (Safari 3.2)   
Hardware: Other   
OS: Other   
URL: http://jsbin.com/ohErOtuM/1
Attachments:
Description Flags
Rendering in Safari 7 under OS X Mavericks
none
Rendering in Mobile Safari, iOS 7.0.4, iPhone 5
none
Rendering in Mobile Safari, iOS 7, iPad 4 none

Description Behrang Saeedzadeh 2013-12-23 00:24:32 PST
Created attachment 219896 [details]
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>
Comment 1 Behrang Saeedzadeh 2013-12-23 00:27:18 PST
Created attachment 219897 [details]
Rendering in Mobile Safari, iOS 7.0.4, iPhone 5
Comment 2 Behrang Saeedzadeh 2013-12-23 00:28:02 PST
Created attachment 219898 [details]
Rendering in Mobile Safari, iOS 7, iPad 4

Please notice that the borders are not being rendered at all.
Comment 3 Behrang Saeedzadeh 2013-12-23 00:28:54 PST
I might have specified the wrong version for WebKit. This issue happens under the iOS 7 + Mobile Safari + iPad 4 combo.
Comment 4 Behrang Saeedzadeh 2013-12-23 15:09:15 PST
A video demonstration of the problem: http://www.youtube.com/watch?v=eTewrM5vIaQ
Comment 5 Behrang Saeedzadeh 2013-12-23 15:24:57 PST
Another video: http://www.youtube.com/watch?v=cBBAlkQZ8wo&feature=youtu.be
Comment 6 Radar WebKit Bug Importer 2014-01-02 12:17:41 PST
<rdar://problem/15739693>
Comment 7 Radar WebKit Bug Importer 2014-01-02 12:17:42 PST
<rdar://problem/15739694>
Comment 8 Brent Fulgham 2022-02-10 14:23:31 PST
This was actually:
<rdar://13569323>
Comment 9 Brent Fulgham 2022-02-10 14:23:52 PST
The fix for this issue was needed outside the WebKit project, therefore this is being resolved as 'Moved'.

This should now be fixed in shipping software.