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:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED MOVED

Severity:

Major

CC:

bfulgham, simon.fraser

Priority:

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.