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
Created attachment 21306 [details] shows two boxes with reflection: one has a mask, other does not
Created attachment 21307 [details] reflection on masked object is partially revealed if the object is skewed
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.
Another option is to just say that the mask *never* masks anything outside the border box for any value of mask-clip.
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)
(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'.
Safari, Chrome, and Firefox show the same rendering behavior for this test case. I do not believe any further compatibility issue remains.