Why do certain CSS matrix3ds fail to render - html

Question

Problem: Certain values of matrix3d cause a div not to render at all, but the inspector's highlight area for the div is the correct shape.
I have an app which uses the camera to recognize four dots near the corners of a rectangular object. I calculate a matrix from the positions of those dots to map a div with a certain size to the quadrilateral defined by the screen positions of the dots. This is all fine, but at certain arrangements of the dots, the div being transformed by the matrix does not render at all. After implementing this, I found this example, which does much the same thing I'm doing, albeit without the AR: http://franklinta.com/2014/09/08/computing-css-matrix3d-transforms/
If you inspect a div with such a matrix, the blue highlight has the correct shape, but the div doesn't render. It also seems not to calculate pointer events, otherwise the cursor style would be visible. If you run the following snippet, you should be able to inspect the div and highlight it to see the shape is ought to have.
.rect {
position:absolute;
left:0;
top:0;
width:736px;
height:414px;
transform-origin:0 0;
background:red;
cursor:crosshair;
}
<div class="rect" style="transform:matrix3d(0.009359283667, 0.010930981398, 0, 0.000104500516, -0.092142538522, -0.121434733223, 0, -0.000225136056, 0, 0, 1, 0, -21.813928384019, -10.640940675131, 0, -0.106409406751)"></div>
<div>Inspect my invisible sibling...</div>
I'm currently using .toFixed(12) on each element of the matrix after calculation and right before applying it to the div. In my prior research to solve this, it was suggested that it could be a precision problem, but that doesn't seem to be the case. I have tried down to .toFixed(6), but that served only to make the matrix less correct.
I see this in Chrome, Version 42.0.2311.135 (64-bit) and Safari Version 7.1.5 (9537.85.14.17). I haven't tried other browsers.
Now, Frank Ta's example doesn't seem to have the same problem as mine, so I suspect there is some way I could calculate the matrices differently such that they would render correctly. However, that's not relevant to what I'm asking. My question is this: Why do these certain matrices cause normal rendering to fail, but highlighting them in the inspector shows the expected shape?
I can give a list of additional examples of such matrices if it would help.