We are creating an element, filling it with a color, and using -webkit-mask-box-image to mask the element into a shape.
Once rotated or transformed, pixel "fringe" shows up on the outside of the element, like a very thin border.
This is particularly painful when animating the element.
Load the provided reduced test case URL to see the problem.
- On top, see the 30deg rotated element. Notice that it appears to have a thin purple "border".
- On bottom, the same element without rotation. Note that there is no "border" or bounding box.
*** This bug has been marked as a duplicate of bug 19179 ***