Jaggy edges on mask when child image overlaps parent masked container

As you can see on the image - if I have a panel with a nicely anti-aliased mask. When I place child objects in the panel and they overflow the parent then the edges where the overflow happens becomes aliased or “jaggy”

Any idea how to fix this?

Maybe have the parent use a material with an alpha-image rather then using the image component in conjunction with the mask-component?

Solutions I looked at:

  1. add a separate border graphic
    in-front of the ui-item to hide the
    jaggies (this is the solution I used)
  2. Pre-compose all the elements
    including alpha in Photoshop and use
    as a single graphic - (I wanted to
    be able to animate the child
    components behind the mask - also I
    loose the ability to quickly create
    the item)
  3. Use a square and not an organic
    shape