Brightness filter on image with transition ignores border radius clipping on ancestor

• Component: CSS
• Status: RESOLVED DUPLICATE

[Amaury Bauzac]

Version : 537.36

Reproduced on Chrome 43 and Safari

Hello, 

I encounter a CSS problem using the brightness filter and transition filter on an image. Here is a simple example :

<style>
div {
  border: 4px solid #fff;
  border-radius: 50%;
  overflow: hidden;
}

img {
  -webkit-filter: brightness(0.8);
  -webkit-transition: -webkit-filter 1s ease-out;
  width: 100%;
}

img:hover {
  -webkit-filter: brightness(0.6);
}
</style>

<div>
  <img src="http://i0.kym-cdn.com/photos/images/facebook/000/581/722/7bc.jpg">
</div>


Or see directly : http://codepen.io/bqlou/pen/rVvLXK

Expected result : when hovering the image, brightness applies to the image

Actual result : when hovering the image, brightness applies to the image without repainting the whole picture during the transition

[Simon Fraser (smfr)]

The bug here is that we're not taking the border-radius into account for the composited clip while the transition is running. I think we have another bug on this.

[Radar WebKit Bug Importer]

<rdar://problem/21766718>

[Simon Fraser (smfr)]

The problem is more general. Any layer that has an "ancestor clipping layer" that's affected by corner radius doesn't take the radius into account.

[Simon Fraser (smfr)]

Created attachment 278406 [details]
WIP

[WebKit Commit Bot]

Attachment 278406 [details] did not pass style-queue:


ERROR: Source/WebCore/rendering/RenderLayer.h:817:  The parameter name "context" adds no information, so it should be removed.  [readability/parameter_name] [5]
Total errors found: 1 in 14 files


If any of these errors are false positives, please file a bug against check-webkit-style.

[Simon Fraser (smfr)]

*** Bug 203558 has been marked as a duplicate of this bug. ***

[Simon Fraser (smfr)]

*** This bug has been marked as a duplicate of bug 68196 ***