Bug 19203 – CSS masks should not clip by default (add a value of "none" to mask-clip property)

• Component: CSS
• Status: RESOLVED CONFIGURATION CHANGED

[CJ Yetman]

If you add a CSS mask to an object that has a CSS reflect, the reflection no longer appears.
CSS transforms don't play nice with CSS reflect either. May be linked. See bug https://bugs.webkit.org/show_bug.cgi?id=19179
also see test case

[CJ Yetman]

Created attachment 21306 [details]
shows two boxes with reflection: one has a mask, other does not

[CJ Yetman]

Created attachment 21307 [details]
reflection on masked object is partially revealed if the object is skewed

[Dave Hyatt]

It is at the moment correct behavior that a mask causes a reflection to disappear.  We will have to add a new value to mask-clip (something like "none") and make it the default in order to fix this.  Note that the same thing happens with box-shadow (the shadow will disappear).

This is happening because mask-clip is defaulting to a value of "border", which means it is clipping out everything outside the border.

[Dave Hyatt]

Another option is to just say that the mask *never* masks anything outside the border box for any value of mask-clip.

[CJ Yetman]

this behavior has changed in Webkit nightly build 530.6

in the second test, the skewed box shows no reflection at all, instead of just the portion of the shadow that fits within the border of where the box would be if it were not skewed (like it does with the current Safari 4.0 Beta)

[Dirk Schulze]

(In reply to comment #4)
> Another option is to just say that the mask *never* masks anything outside the border box for any value of mask-clip.

The CSS WG decided to add a new keyword, which will most likely be 'no-clip'.

[Brent Fulgham]

Safari, Chrome, and Firefox show the same rendering behavior for this test case. I do not believe any further compatibility issue remains.