Problem with divs placement - Javascript

I'm developing a somewhat complex application and some issues are occurring with the placement of a specific div.

Here is an html fragment containing this div:

<div class="row integracao-content">
    <div class="background">
        <div>
            <div class="imagem">
                <div class="mascara">
                    <div class="efeitomouse">
                        <img src="imagens/fundos/fundo-integra.png"/>
                    </div>
                </div>
            </div>
            [...]
        </div>
    </div>
    [...]
</div>

Containing the following css:

.background              { position: absolute; height: 100%; width: 90%;  right:0; }
.background > div        { position: relative; height: 100%; width: 100%; }
.background .imagem      { position: absolute; height: 100%; width: 100%; z-index: -2;}
.background .mascara     {                     height: 100%; width: 100%; overflow: hidden; }
.background .efeitomouse { position: relative; height: 110%; width: 110%; top: -5%; left: -5%;}
.background .imagem img  {                     height: 100%; width: 100%; }

The problem div is with the class efeitomouse , this div has its positioning changed according to the position of the mouse.

The code to change the position of this is as follows:

moverElementosMousemove(x, y) {
    var left = x - (app.tamanhoTela.width / 2);
    var top = y - (app.tamanhoTela.height / 2);

    var px = elemento.posicaoOriginal.left + left * fator.x; //fator.x : 0.015
    var py = elemento.posicaoOriginal.top + top * fator.y; //fator.y : 0.005

    elemento.objeto.style.left = px + 'px';
    elemento.objeto.style.top = py + 'px';
}

This function receives the current position of the mouse by argument and calculates a delocation (usually varying in -15px to 15px ) and applies by changing the style property of that element.

element.object: reference to a div with position: absolute or position: relative

Element.Original: original position of the element captured by the code below:

carregarMousemove: function () {
    this.resetarPosicoes();

    var obj = document.getElementsByClassName('efeitomouse')[0];
    console.log('l' + obj.offsetLeft + ' t' + obj.offsetTop);

    elemento = {
        objeto: elementos[i],
        posicaoOriginal: {
            top: elementos[i].offsetTop,
            left: elementos[i].offsetLeft
        }
    });
},
resetarPosicoes: function () {
    for (var i = 0; i < this.elementosMousemove.length; i++) {
        this.elementosMousemove[i].objeto.style.left = '';
        this.elementosMousemove[i].objeto.style.top = '';
    }
}

The problem is that every time I call the function carregarMousemove this div is coming with a offsetTop and a offsetLeft different, following log result:

l-32 t-15
l-34 t-15
l-36 t-15
l-38 t-15
l-40 t-15
l-42 t-15
l-44 t-15

This function is called when I change an image from the center of the page, which has the same effect. Each time the function is called this image shifts a few pixels to the left.

Is there any way that this shift can not occur?