The following HTML shows that the -webkit-box-shadow does not work on divs where either opacity or overflow values are specified as well - both cases end up with a cosmetic glitch in the bottom right corner (which is visible due to the -webkit-corner-radius property). Tested with latest WebKit nightly as of 01/10/2007 <html> <head> <style type="text/css"> #Shadow { padding: 2px; border: rgb(76, 70, 52) 1px solid; color: #FFFFFF; background-color: rgb(125, 115, 84); -webkit-border-radius: 6px; -webkit-box-shadow: 6px 6px 6px #555555; } #ShadowOpacity { padding: 2px; border: rgb(76, 70, 52) 1px solid; color: #FFFFFF; background-color: rgb(125, 115, 84); opacity: 0.85; -webkit-border-radius: 6px; -webkit-box-shadow: 6px 6px 6px #555555; } #ShadowOverflow { padding: 2px; border: rgb(76, 70, 52) 1px solid; color: #FFFFFF; overflow: auto; background-color: rgb(125, 115, 84); -webkit-border-radius: 6px; -webkit-box-shadow: 6px 6px 6px #555555; } </style> </head> <body> <div id="Shadow">shadow works</div> <br /> <div id="ShadowOpacity">no shadow with opacity</div> <br /> <div id="ShadowOverflow">no shadow with overflow</div> </body> </html>
Created attachment 13113 [details] Test case from Comment #0
The patch attached to bug 12729 fixes this bug as well.
Fixed in r21605.