Bug 126151 - Mobile Safari for iOS 7 (iPad 4) does not render multiple box shadows in some cases
Summary: Mobile Safari for iOS 7 (iPad 4) does not render multiple box shadows in some...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 525.x (Safari 3.2)
Hardware: Other Other
: P2 Major
Assignee: Nobody
URL: http://jsbin.com/ohErOtuM/1
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2013-12-23 00:24 PST by Behrang Saeedzadeh
Modified: 2014-01-02 12:17 PST (History)
1 user (show)

See Also:


Attachments
Rendering in Safari 7 under OS X Mavericks (117.30 KB, image/png)
2013-12-23 00:24 PST, Behrang Saeedzadeh
no flags Details
Rendering in Mobile Safari, iOS 7.0.4, iPhone 5 (36.35 KB, image/png)
2013-12-23 00:27 PST, Behrang Saeedzadeh
no flags Details
Rendering in Mobile Safari, iOS 7, iPad 4 (111.48 KB, image/png)
2013-12-23 00:28 PST, Behrang Saeedzadeh
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
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>