Wrong mouse coordinates when using css zoom property

Question

When I use the css zoom property, the mouse coordinates are correct on all but two elements : http://seiyria.com/bootstrap-slider/ & https://fullcalendar.io

How do we fix this problem ? Thank you in advance for your help.

Answer 1

For fullcalendar.io, I found a solution on Github, it is necessary to edit two functions of the file fullcalendar.js :

function getEvX(ev) {
    if (ev.pageX !== undefined) {
        return ev.pageX / Number($('body').css('zoom'));
    }
    var touches = ev.originalEvent.touches;
    if (touches) {
        return touches[0].pageX / Number($('body').css('zoom'));
    }
}


function getEvY(ev) {
    if (ev.pageY !== undefined) {
        return ev.pageY / Number($('body').css('zoom'));
    }
    var touches = ev.originalEvent.touches;
    if (touches) {
        return touches[0].pageY / Number($('body').css('zoom'));
    }
}

For bootstrap slider, here's the solution :

var valeurZoom =  window.getComputedStyle(document.body, null).getPropertyValue('zoom');

if (valeurZoom !== "" && valeurZoom !== 1) { 
    eventPosition = eventPosition / valeurZoom;
}

Hopefully it helps other people !