为什么我在缩放整个身体时会出现错误的光标位置？

Question

我正在使用CSS缩放变换来缩放整个。问题是我的光标位置错误。我想创建一个新的div，其中单击光标但是div在错误的位置创建。

$(document).ready(function() {
    $('body').css({
        transform: 'scale(0.5,0.5)'
    });
    var k = 1;
    $('.container').off('click').on('click', function(e) {
        var top = e.pageY;
        var left = e.pageX;
        $('<div />', {
            id: 'temp' + k
        }).css({
            position: 'absolute',
            top: top + 'px',
            left: left + 'px',
            width: '50px',
            height: '50px',
            border: '1px solid red'
        }).appendTo('.container');
        k++;
    });
});