Unwanted outline on border when parent is transformed

Question

I am using borders on some content. However, I am finding an unwanted 1px outline the same color as the background color is being added around the border when t

Answer 1

Not a great fix, but adding backface-visibility: hidden; which determines if the element should be visible or not when it's faced away from the screen, commonly used when you "flip" and element, seems to fix it, at least in Chrome. I haven't got the possibility to test in IE though.

The reason I tried it is because this "hack" has solved simliar issues that I've had before. But I'm not really sure why it works ...

jsFiddle