getBoundingClientRect не работает должным образом на теле после преобразования

Question

$( document ).ready(function() {
  
    $('body').append('<div id="tester2"></div>');
    $('#tester2').css({
     position:'absolute',
      background:'blue',
      width: 10,
      height:10
    });
    setInterval(function(){ 
      var x = $('#tester')[0].getBoundingClientRect();
      $('#tester-pos').text('top: ' + x.top + ', left:' + x.left);
      $('#tester2').css({
       top:x.top,
       left:x.left
     });
    }, 1000);
    
    $('#jquery-version').text('jquery version: ' + $.fn.jquery);
});

#tester{
  position:absolute;
  top:50px;
  left:50px;
  width:10px;
  height:10px;
  background:red;
}

#page{
  min-height:200px;
}

body{
  border:2px solid green;
  transform: scale(1) translate(20px, 40px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tester">
</div>
<div id="page">
getBoundingClientRect on red tester returned:
<span id="tester-pos"></span>
<div id="jquery-version"></div>
</div>

Мне нужно разместить div по существующему div, Существующий div содержится в теле документа HTML и имеет свойство CSS transform set. Мне нужно разместить новый div после того, как документ был представлен и преобразован.

Когда я звоню getBoundingClientRect() на div что мне нужно скрыть (красный квадрат в прикрепленной скрипке) я получаю неправильный верх / лево. Я установил верхнюю / левую часть синего квадрата на выход getBoundingClientRect() и они не перекрываются.

setInterval(function(){ 
    var x = $('#tester')[0].getBoundingClientRect();
    $('#tester-pos').text('top: ' + x.top + ', left:' + x.left);
    $('#tester2').css({
        top:x.top,
        left:x.left
    });
}, 1000);

Как это можно решить?

Answer 1

Вы можете просто взять offsetTop а также offsetLeft не беспокоясь о преобразовании, поскольку то же самое преобразование применяется и к недавно добавленному div. Я предполагаю, что из примера.

$(document).ready(function() {

  $('body').append('<div id="tester2"></div>');
  $('#tester2').css({
    position: 'absolute',
    background: 'blue',
    width: 10,
    height: 10,
    opacity: 0.6
  });
  var tester = document.getElementById('tester');
  $('#tester2').css({
    top: tester.offsetTop - 2, // 2px border for body
    left: tester.offsetLeft - 2
  });

  $('#jquery-version').text('jquery version: ' + $.fn.jquery);
});

#tester {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 10px;
  height: 10px;
  background: red;
}

#page {
  min-height: 200px;
}

body {
  border: 2px solid green;
  transform: scale(1) translate(20px, 40px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="tester">
</div>
<div id="page">
  getBoundingClientRect on red tester returned:
  <span id="tester-pos"></span>
  <div id="jquery-version"></div>
</div>

Answer 2

У меня есть ответ, который работает, возможно, это еще не лучший ответ, но он работает на 100% для меня.

$( document ).ready(function() {
  
    $('body').append('<div id="tester2"></div>');
    $('#tester2').css({
     position:'absolute',
      background:'blue',
      width: 10,
      height:10,
    });
    
    setInterval(function(){ 
      var x = $('#tester')[0].getBoundingClientRect();
      $('#tester-pos').text('top: ' + x.top + ', left:' + x.left);
      $('#tester2').css({
       'top':x.top/2,
       'left':(x.left/2)+x.width
     });
    }, 1000);
    
    $('#jquery-version').text('jquery version: ' + $.fn.jquery);
 });

#tester{
  position:absolute;
  top:50px;
  left:50px;
  width:10px;
  height:10px;
  background:red;
}

#page{
  min-height:200px;
}

body{
  border:2px solid green;
  transform: scale(1) translate(20px, 40px);
}

#tester2{
  transform: scale(1) translate(0, 0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tester">
</div>
<div id="page">
getBoundingClientRect on red tester returned:
<span id="tester-pos"></span>
<div id="jquery-version"></div>
</div>

---

редактировать

Единственное время, когда моё потенциальное решение становится немного странным, это когда тебе приходится прокручивать... Так что будь осторожен.