My favorites | Sign in
Project Home Downloads Wiki Issues Code Search
New issue   Search
for
  Advanced search   Search tips   Subscriptions
Issue 29427: Inset box shadow escapes content when border radius present
528 people starred this issue and may be notified of changes. Back to list
Status:  Verified
Owner:  morrita@google.com
Closed:  Dec 2010
Cc:  a...@chromium.org, arv@chromium.org, senorbla...@chromium.org, brettw@chromium.org

Restricted
  • Only users with Commit permission may comment.


Sign in to add a comment
 
Project Member Reported by arv@chromium.org, Dec 4, 2009
What steps will reproduce the problem?

Create a div with rounded corners and an inset box shadow.

<div style="
  border: 1px solid black;
  width: 100px;
  height: 100px;
  -webkit-box-shadow: inset 2px 2px 2px red;
  -webkit-border-radius: 10px;
  -moz-box-shadow: inset 2px 2px 2px red;
  -moz-border-radius: 10px;
"></div>

http://www.plexode.com/cgi-
bin/eval3.py#ht=%3Cdiv%20style%3D%22%0A%20%20border%3A%202px%20solid%20black%3B%0A%20%20width%3A%20100px
%3B%0A%20%20height%3A%20100px%3B%0A%20%20-webkit-box-
shadow%3A%20inset%205px%205px%205px%20red%3B%0A%20%20-webkit-border-radius%3A%2020px%3B%0A%20%20-moz-
box-shadow%3A%20inset%205px%205px%205px%20red%3B%0A%20%20-moz-border-
radius%3A%2020px%3B%0A%22%3E%3C%2Fdiv%3E%0A&ohh=1&ohj=1&jt=&ojh=1&ojj=1&ms=100&oth=0&otj=0&cex=1

What is the expected output? What do you see instead?

The shadow must not escape the content.

It seems like the inset box shadow ignores the rounded corners.

This works correctly in Safari and Chrome on Mac. It fails on Chrome Windows and Linux so it is probably 
Skia issue.
Jan 14, 2010
#3 manuel....@gmail.com
I'm experiencing the same problem, here is my test code and a screenshot.

yourBox
{
	background: #505050;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-box-shadow: inset 0 1px 6px rgba( 0, 0, 0, 0.9 );
	-moz-box-shadow: inset 0 1px 6px rgba( 0, 0, 0, 0.9 );
}

chromium_boxshadow_rounded_bug.png
747 bytes   View   Download
Apr 1, 2010
#4 or...@chromium.org
Bulk update
Labels: Mstone-6
Apr 8, 2010
#5 jhlagado
you can work around this by defining the border 

yourBox
{
	background: #505050;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-box-shadow: inset 0 1px 6px rgba( 0, 0, 0, 0.9 );
	-moz-box-shadow: inset 0 1px 6px rgba( 0, 0, 0, 0.9 );

        border:1px solid #505050;
}


Apr 8, 2010
#6 manuel....@gmail.com
@jhlagado: it looks slightly better but far from a rounded corner ;)
Apr 22, 2010
#8 arv@chromium.org
Assigning to someone who might actually have a chance to fix this.
Status: Assigned
Owner: senorbla...@chromium.org
Cc: -senorbla...@chromium.org a...@chromium.org
Apr 27, 2010
#9 senorbla...@chromium.org
 Issue 31448  has been merged into this issue.
Jun 20, 2010
#16 thakis@chromium.org
 Issue 46212  has been merged into this issue.
Cc: senorbla...@chromium.org
Jun 20, 2010
#17 thakis@chromium.org
 Issue 44460  has been merged into this issue.
Jun 20, 2010
#18 thakis@chromium.org
 Issue 42656  has been merged into this issue.
Jun 21, 2010
#19 dhw@chromium.org
 Issue 45751  has been merged into this issue.
Jun 22, 2010
#20 ahalli...@gmail.com
I have an example too, which works fine in Mozilla but fails in Chrome on form inputs:

http://www.devseo.co.uk/examples/beautiful-css3-form/
Jun 28, 2010
#21 senorbla...@chromium.org
 Issue 47740  has been merged into this issue.
Cc: bre...@chromium.org
Jun 29, 2010
#22 senorbla...@chromium.org
I'm not actively working on this, so I'm unowning in the hopes that someone adopts it.
Owner: ---
Jul 3, 2010
#23 thakis@chromium.org
This fixes the problem for me:

Index: RenderBoxModelObject.cpp
===================================================================
--- RenderBoxModelObject.cpp	(revision 62294)
+++ RenderBoxModelObject.cpp	(working copy)
@@ -1680,7 +1680,7 @@
             context->save();
 
             if (hasBorderRadius)
-                context->clip(Path::createRoundedRectangle(rect, topLeft, topRight, bottomLeft, bottomRight));
+                context->canvasClip(Path::createRoundedRectangle(rect, topLeft, topRight, bottomLeft, bottomRight));



I'm not entirely sure why, though. It looks like the rounded rect hack that agl put in gets confused with inset shadows, and it's not needed anyway, so sidestepping makes the problem go away. agl, since this is potentially a one-line fix (it just needs a better explanation than "uhh – now it works!" :-) ) and in code you wrote, do you want to take this on?

Else, please assign to me and I'll dig some more.
Owner: a...@chromium.org
Cc: -a...@chromium.org tha...@chromium.org
Jul 3, 2010
#24 thakis@chromium.org
And for my reference: http://trac.webkit.org/changeset/49641 (patch where agl added canvasClip()).
Jul 3, 2010
#25 thakis@chromium.org
I think my patch above is mostly correct. It seems that agl's antialiasing hack doesn't work with shadows. Non-inset shadows are clipped by a call to context->clipOut() (first big branch in RenderBoxModelObject::paintBoxShadow), which happens to not use the antialiasing hack. Inset shadows call context->clipPath(), which uses the antialiasing hack in GraphicsContext::clipPath(). So the patch makes inset shadows work as nice as normal shadows.

It's not the prettiest patch as it somewhat exposes skia implementation details to RenderBoxModel, but in a way that's already happened in http://trac.webkit.org/changeset/49641 .

(Note that using skia's normal clipping for shadows isn't all that great: Since skia's clip paths use only 1 bit of transparency – http://www.imperialviolet.org/2009/09/02/anti-aliased-clipping.html – shadows are pretty aliased. This is for example very visible when drawing a div with border radius 20px, background-color:rgba(255, 0, 0, 0.5), border:3px solid green, and -webkit-box-shadow:4px 4px 8px black. Note the ugly edge with color bleeding and all.)

I guess I'll try to get the patch above landed in webkit.
Owner: tha...@chromium.org
Cc: -tha...@chromium.org a...@chromium.org
Jul 4, 2010
#27 thakis@chromium.org
That didn't go so well :-)

Mitz is right though, we need some way to clip shadows with antialiasing – see screenshot (in addition to the aliased shadow, there are also some jpeg artifacts due to nxclient, sorry about that).
Picture 20.png
88.6 KB   View   Download
Status: Available
Owner: ---
Jul 12, 2010
#31 dhw@chromium.org
(No comment was entered for this change.)
Labels: -Skia
Jul 21, 2010
#32 ka...@chromium.org
(No comment was entered for this change.)
Labels: Mstone-X
Aug 26, 2010
#33 dglazkov@chromium.org
(No comment was entered for this change.)
Labels: Fidelity
Aug 28, 2010
#34 joseluis...@gtempaccount.com
So, nobody is working on this? I have tested Safari on Windows and works as it should. 

I can see too that there's an inset shadow when not setting border. I mean:

.field {
    border: 1px solid #333;
    -webkit-border-radius: 15px;
    -webkit-box-shadow: inset 0 1px 1px #999;
}

Will show this bug, but:

.field {
    -webkit-border-radius: 15px;
}

Will show an inset shadow properly rendering!! I can´t understand why.
Sep 1, 2010
#35 gtib...@gmail.com
article about these bugs in russian (but everything is clear and with sources):
http://habrahabr.ru/blogs/css/103170/
Sep 3, 2010
#36 zon...@gmail.com
still no fix for this bug in the latest verion of Chrome For Windows(6.0.472.53)
Sep 27, 2010
#39 dimitriehoekstra
example of the error

http://cssdesk.com/KKHC7
cssdesk.html
836 bytes   View   Download
Oct 4, 2010
#40 tri...@gmail.com
Crazy. So, if this works in Safari... can someone confirm the patch has been merged into Webkit? If so, why does Chromium not have it yet?
Oct 4, 2010
#41 sam.lb.h...@gmail.com
Still here in the beta (7.0.517.24). Are you guys waiting on webkit to fix this?
Oct 4, 2010
#42 thakis@google.com
Safari uses Cor
Oct 4, 2010
#43 thakis@google.com
eGraphics, while chrome uses Skia for drawing on windows and linux. This is mostly a Skia bug.
Oct 4, 2010
#44 tri...@gmail.com
Opened an issue there and I'm cross-linking >> https://code.google.com/p/skia/issues/detail?id=82
Oct 5, 2010
#45 a...@chromium.org
WebKit assumes that it has immediate mode clipping which Skia doesn't do. See http://neugierig.org/software/chromium/notes/2010/07/clipping.html

Fixing this means rewriting clipping in Skia and the main Skia developer changed jobs.

You're correct that this has been hanging around for too long. However, given the vitriolic abuse that usually ends up being thrown around on graphics issues, I'm not too keen to go near them now.
Labels: Restrict-AddIssueComment-Commit
Oct 29, 2010
#46 aoca...@chromium.org
 Issue 61185  has been merged into this issue.
Nov 29, 2010
#47 paulir...@chromium.org
 Issue 64674  has been merged into this issue.
Dec 21, 2010
#48 pkasting@chromium.org
Is this fixed as of http://trac.webkit.org/changeset/74089 ?
Status: Assigned
Owner: morr...@google.com
Dec 21, 2010
#49 thakis@chromium.org
Yes. I filed  issue 67723  for the polish stuff that's left.
Status: Fixed
Dec 23, 2010
#50 temp01...@gmail.com
 Issue 65587  has been merged into this issue.
Mar 13, 2011
#51 noel@chromium.org
 Issue 73312  has been merged into this issue.
Mar 23, 2011
#52 lafo...@chromium.org
(No comment was entered for this change.)
Labels: -Area-Compat-Web bulkmove Area-Compat
Jun 26, 2012
#53 kr...@chromium.org
(No comment was entered for this change.)
Labels: VerifyIn-21
Blocking: -48277 -67723 chromium:48277 chromium:67723
Jul 16, 2012
#54 kr...@chromium.org
(No comment was entered for this change.)
Status: Verified
Mar 10, 2013
#55 bugdro...@chromium.org
(No comment was entered for this change.)
Labels: -Type-Bug -Area-Internals -Internals-Skia -Area-Compat Cr-Internals-Skia Type-Compat Cr-Internals
Blocking: -chromium:48277 -chromium:67723 chromium:48277 chromium:67723
Sign in to add a comment

Powered by Google Project Hosting