Question

I’m trying to apply a CSS mask to an element that also has child elements positioned outside the parent. The problem is that when I add the mask the child elements disappear exactly as if I’d set the parent to overflow: hidden;

Is there a way to avoid this? I realize that perhaps this might be the desired behaviour at times (always?) but for me it breaks the layout. (Edit: it may very well be the definition of setting a mask).

I’ve set up a JS-fiddle with what I’m trying to do. Comment the -webkit-mask to see the outside positioned element.

http://jsfiddle.net/jknn9/

@Nate B’s got it: http://jsfiddle.net/jknn9/2/

Answer 1

Unfortunately, what you’re seeing is the whole point of the mask. As said on Webkit’s blog:

The mask will therefore overlay the child and all of its descendants,
and at a minimum will knock out everything outside the border box of
the object.

As an alternative, maybe you use another pseudo-element (:after) and create a red box that will act as a “cap” to the end of the label and apply the mask to that instead of the parent element.