Bug 26444 – Reflection of a box with rounded corners AND a shadow creates clipping / alias issues in reflected object

• Status: NEW
• Component: Layout and Rendering

[Jeremy Young]

STEPS TO RECREATE:
1. Create a DIV with rounded corners (A).
2. Add a shadow to object (A).
3. Add a reflection to object (A).

RESULTS:
Notice that the corners of the reflected object are not transparent, but are rather filled with the shadow color. Also, when animating the rotation or scale of object (A) using CSS animation you will notice alias or clipping issues where the shadow color is shown even on "flat" edges. My test case shows this issue.

EXPECTED:
The shadow should NOT be copied to the reflection object, thus preventing the clipping / alias issues that occur with rounded corner objects.

I noticed this bug in the release version of Safari 4.0 for Mac - Version 4.0 (5530.17)

[Jeremy Young]

Created attachment 31349 [details]
A test case that shows the clipping / alias issues with rounded corner objects with shadows and reflection

This test case shows the non-animated and animated issues that are seen when a DIV that has rounded corners, a shadow, and a reflection is used. The shadow is copied to the empty space on the corners of the object in the reflection. Additionally, the long edges of the object also have alias issues when the rotation or scale of the object s changed through animation.

[Simon Fraser (smfr)]

Problem when animating is bug 31885.

[Simon Fraser (smfr)]

Looks similar to bug 19179, but the shadow still causes issues.

[Ahmad Saleem]

I am able to reproduce this bug with WebKit ToT (264279@main), where the corner on reflections are not transparent but filled. Although, I am not able to see any issues on flat lines in reflection, although they do flicker in Chrome Canary 115.

Just wanted to share latest testing result. Thanks!