Panzoom, set div position to zoom focal point when zooming

Question

I would like to monitor visually the zooming focal point in the panzooom jquery plugin. in order to do so, I would like to position a little 10x10 div on the same coordinates as the focal point, but somehow it is placing it in a totally different location. Here is my code:

(only posting relevant parts)

$panzoom.panzoom("option", {
      contain: false,
      increment: 10,
      duration: 2000,
      animate: true,
      exponential: false,
      minScale: minScale,
      maxScale: maxScale,
      panOnlyWhenZoomed : false,
      focal: {
            clientX:  position.left,  //coordinates of an existing div. 
            clientY:  position.top
        }
    }); 

    $panzoom.panzoom('zoom');

    var d = document.getElementById('zoomcenter');
    d.style.left = position.left+'px';
    d.style.top = position.top+'px';   // I expect this div to be 
                                       // placed in the same position as the above, 
                                       // where I am zooming to. Instead it is placed 
                                       // somewhere totally different. 
                                       // probably affected by the transform Matrix. 
                                       // but not able to figure out why.

    var matrix = $panzoom.panzoom("getMatrix");

    console.debug("boxl:" + position.left + " boxt:" + position.top + " zcl:" + $('#zoomcenter').offset().left + " zct:" + $('#zoomcenter').offset().top + " Matrix:" + matrix.toString())


//returns this:
// boxl:986.6997680664062 boxt:343.0241394042969 zcl:692.1810302734375 zct:285.1896057128906 Matrix:1.6775,0,0,1.6775,-1133.01,-244.451

EDIT: Additional info: - the div zoomcenter has absolute positioning. - the position of $panzoom.panzoom('zoom') does not affect the result.