P2 object overlaps sometimes

[simpleyuji]

So I've been having trouble understanding how P2 physics works. Particularly, depending on the order of my function calls, sometimes the behavior would be different. Currently, if you look at the example here (https://jsfiddle.net/5vLv5nv4/3/), if the arrow-key controllable smaller box collides with the bigger one on the edge, it would actually go inside and through the body before some kind of separation happens. However, if I change the lines from 

box.body.mass = 0.3;
box.body.damping = 1;
box.body.fixedRotation = true;

to:

box.body.fixedRotation = true;
box.body.mass = 0.3;
box.body.damping = 1;
  

The desired behavior of the objects not overlapping occurs. Why is this happening? Is it a P2 bug? It took me several hours to make it work the way I want it to (i tried changing the stiffness, tolerance, friction, contactMaterials, relaxation) by trial and error. I wish there's a more systematic way to debug physics. 

Is there a good P2 tutorial out there?