RESOLVED DUPLICATE of bug 58511 61622
box-shadow doesn't render if optional color is omitted 
https://bugs.webkit.org/show_bug.cgi?id=61622
Summary box-shadow doesn't render if optional color is omitted
Rodrigo Ludgero
Reported 2011-05-27 04:39:44 PDT
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Documento sin título</title> <!--stylesheets--> <style> body { background-color:#444444; margin:0 auto; } #header-wrapper { height:30px; margin: 0 auto; position:relative; clear:both; float:none; background-color:#444444; padding:3px; border-bottom-color:#353535; border-bottom-style:solid; border-bottom-width:1px; -moz-box-shadow: 0px 0px 10px; -webkit-box-shadow: 0px 0px 10px; box-shadow: 0px 0px 10px; z-index:9999; } #wrapper { height:720px; margin: 0 auto; position:relative; clear:both; float:none; } #foot-wrapper { height:30px; margin:0 auto; position:relative; clear:both; float:none; padding:3px; border-top-color:#353535; border-top-style:solid; border-top-width:1px; -moz-box-shadow:0px 0px 10px; -webkit-box-shadow:0px 0px 10px; box-shadow:0px 0px 10px; z-index:9999; } </style> </head> <body> <section id="header-wrapper"></section> <section id="wrapper"></section> <section id="foot-wrapper"></section> </body> </html> ----------------------------------------------------------------------- Webkit box shadow doesn't display the shadow in header and foot wrapper, in the others browsers like firefox,ie9 and opera work perfect. Why?
Attachments
Testcase (1.19 KB, text/html)
2011-05-27 17:02 PDT, Simon Fraser (smfr) 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Simon Fraser (smfr)
Comment 1 2011-05-27 17:02:28 PDT
Created attachment 95232 [details] Testcase
Simon Fraser (smfr)
Comment 2 2011-05-27 17:21:33 PDT
The issue is that you're not supplying a shadow color. The spec says "omitted colors are a UA-chosen color" but WebKit doesn't allow that yet.
Simon Fraser (smfr)
Comment 3 2011-05-27 21:33:38 PDT
*** This bug has been marked as a duplicate of bug 58511 ***
Rodrigo Ludgero
Comment 4 2011-05-27 23:34:56 PDT
(In reply to comment #2) > The issue is that you're not supplying a shadow color. The spec says "omitted colors are a UA-chosen color" but WebKit doesn't allow that yet. I think the problem is in versions of chrome 11.0.696.71 and Safari 5.05, because i can't see the shadow, even adding the color.
Simon Fraser (smfr)
Comment 5 2011-05-28 09:19:58 PDT
Safari 5.0.5 doesn't support unprefixed box-shadow.
Rodrigo Ludgero
Comment 6 2011-05-30 04:46:34 PDT
(In reply to comment #5) > Safari 5.0.5 doesn't support unprefixed box-shadow. <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Documento sin título</title> <!--stylesheets--> <style> body { background-color:#444444; margin:0 auto; } #header-wrapper { height:30px; margin: 0 auto; position:relative; clear:both; float:none; background-color:#444444; padding:3px; border-bottom-color:#353535; border-bottom-style:solid; border-bottom-width:1px; -moz-box-shadow: 0px 0px 10px;<!--firefox--> -webkit-box-shadow: 0px 0px 10px #000000;<!--chrome and safari--> box-shadow: 0px 0px 10px;<!--opera and ie9--> z-index:9999; } #wrapper { height:720px; margin: 0 auto; position:relative; clear:both; float:none; } #foot-wrapper { height:30px; margin:0 auto; position:relative; clear:both; float:none; padding:3px; border-top-color:#353535; border-top-style:solid; border-top-width:1px; -moz-box-shadow:0px 0px 10px;<!--firefox--> -webkit-box-shadow:0px 0px 10px #000000;<!--chrome and safari--> box-shadow:0px 0px 10px;<!--opera and ie9--> z-index:9999; } </style> </head> <body> <section id="header-wrapper"></section> <section id="wrapper"></section> <section id="foot-wrapper"></section> </body> </html> <!-- The shadow in IE9, Opera 11, firefox 4, show such as .png below: http://imageshack.us/photo/my-images/862/fireshotcapture.png/ --> <!-- I still have trouble viewing in safari and chrome, both still show no shadow. --> Thanks.
Simon Fraser (smfr)
Comment 7 2011-05-30 08:25:03 PDT
<!--firefox--> is not a valid CSS comment. This is breaking your CSS.
Rodrigo Ludgero
Comment 8 2011-05-30 09:23:28 PDT
(In reply to comment #7) > <!--firefox--> is not a valid CSS comment. This is breaking your CSS. My problem is not the comment, if you copy the code and look in the others browsers, you see and understand what i want... The shadow in IE9, Opera 11, firefox 4, show such as .png below: http://imageshack.us/photo/my-images/862/fireshotcapture.png/ I still have trouble viewing in safari and chrome, both still show no shadow. Sorry for my basic english, and thank you. ------------------------------------------------------------------------- <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Documento sin título</title> <!--stylesheets--> <style> body { background-color:#444444; margin:0 auto; } #header-wrapper { height:30px; margin: 0 auto; position:relative; clear:both; float:none; background-color:#444444; padding:3px; border-bottom-color:#353535; border-bottom-style:solid; border-bottom-width:1px; -moz-box-shadow: 0px 0px 10px; /*mozilla-firefox*/> -webkit-box-shadow: 0px 0px 10px #000000; /*chrome and safari*/ box-shadow: 0px 0px 10px; /*opera and ie9*/ z-index:9999; } #wrapper { height:720px; margin: 0 auto; position:relative; clear:both; float:none; } #foot-wrapper { height:30px; margin:0 auto; position:relative; clear:both; float:none; padding:3px; border-top-color:#353535; border-top-style:solid; border-top-width:1px; -moz-box-shadow:0px 0px 10px; /*mozilla-firefox*/ -webkit-box-shadow:0px 0px 10px #000000; /*chrome and safari*/ box-shadow:0px 0px 10px; /*opera and ie9*/ z-index:9999; } </style> </head> <body> <section id="header-wrapper"></section> <section id="wrapper"></section> <section id="foot-wrapper"></section> </body> </html> -----------------------------------------------------------------------------
Simon Fraser (smfr)
Comment 9 2011-05-30 09:30:17 PDT
Please stop pasting large chunks of markup into the. Use the attachment feature, and make a minimal testcase (single div). /*mozilla-firefox*/> still bad here.
Rodrigo Ludgero
Comment 10 2011-05-30 09:49:35 PDT
(In reply to comment #9) > Please stop pasting large chunks of markup into the. Use the attachment feature, and make a minimal testcase (single div). > > /*mozilla-firefox*/> > still bad here. Forget, i found the solution, thank you for your time.
Note You need to log in before you can comment on or make changes to this bug.