MouseEvent.clientX и MouseEvent.clientY Неожиданные результаты с масштабным преобразованием CSS

Question

$('body').on('mousemove', function (ev) {
    $('span').text(`x: ${ev.clientX}, y: ${ev.clientY}`)
})

body {
  padding: 0;
  margin: 0;
}

div {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #333;
  transform: scale(2, 2);
}

span {
  position: absolute;
  left: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="my-div"></div>
<span id="my-span"></span>

Мне просто интересно, почему масштабированный div возвращает координаты x и y MouseEvent в диапазоне от 0 до 150 вместо от 0 до 200? Свойство scale установлено в 2, поэтому я подумал, что это будет второй диапазон вместо первого. Может кто-нибудь объяснить? Вот ссылка на js страницу скрипки .

Я заметил много похожих вопросов о Stackoverflow, так что это может быть дубликат. Однако я не смог найти ничего, что конкретно задавало бы этот вопрос о пикселях, координатах и ​​преобразовании масштаба в CSS. Возможно, я что-то упустил, хотя ...

Спасибо!

Answer 1

, поскольку transform-origin по умолчанию является центром, поэтому половина деления находится вне экрана сверху / слева.

Либо обновите источник преобразования:

$('body').on('mousemove', function (ev) {
    $('span').text(`x: ${ev.clientX}, y: ${ev.clientY}`)
})

body {
  padding: 0;
  margin: 0;
}

div {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #333;
  transform: scale(2, 2);
  transform-origin:0 0;
}

span {
  position: absolute;
  left: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="my-div"></div>
<span id="my-span"></span>

Или добавить поле:

$('body').on('mousemove', function (ev) {
    $('span').text(`x: ${ev.clientX}, y: ${ev.clientY}`)
})

body {
  padding: 0;
  margin: 0;
}

div {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #333;
  transform: scale(2, 2);
  margin:50px;
}

span {
  position: absolute;
  left: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="my-div"></div>
<span id="my-span"></span>

Answer 2

Элемент div масштабируется относительно его центра, поэтому часть его оказывается за пределами экрана. (Один из способов заметить это: добавить границу в div и увидеть, что он не go полностью.)

Попробуйте использовать transform-origin: top left; в div - я думаю, что это будет делать вы ожидаете.