En ciertos casos, getBoundingClientRect() produce resultados incorrectos y, por lo tanto, es una función poco confiable. En Chrome al menos. Ejemplo:
var greenRectangle = document.getElementById("target") var rect = greenRectangle.getBoundingClientRect() var visualized = document.createElement("div") visualized.style.position = "absolute" visualized.style.border = "1px solid red" visualized.style.top = rect.top+"px" visualized.style.left = rect.left+"px" visualized.style.width = rect.width+"px" visualized.style.height = rect.height+"px" visualized.style.background = "#ff00002e" document.body.appendChild(visualized) <html> <body> <div style="transform: translate(10px, 42px);"> <div style="width: 100px;height: 300px;background: black;"> <div style="transform: translate(140px, -10px);width: 400px;height: 300px;"> <div> <div id="target" style="transform: translate(89px, 28px) rotate(2rad); width: 200px; height: 100px; background: green;"></div> </div> </div> </div> </div> </body> </html> Si se gira el rectángulo verde, getBoundingClientRect() en él devuelve un rectángulo delimitador incorrecto, aquí se muestra en rojo. He probado esto en Firefox y no hay problemas allí. Parece tener algo que ver con el contenedor div vacío alrededor del rectángulo verde. Sin él, getBoundingClientRect() funciona correctamente. A mí me parece un error de Chrome. ¿Hay alguna manera de evitar eso?
EDITAR: Parece que esto ya se ha solucionado, al menos para el caso de ejemplo en este fragmento. No estoy seguro de si hay otros casos en los que getBoundingClientRect() devuelve valores incorrectos.
ERROR DE CÁLCULO DE LÍMITE DE LÍNEA SVG - TODAVÍA CROMO
ACTUALIZACIÓN: Puede encontrar más información sobre este error aquí: SVG getBoundingClientRect() + "transform: rotar()" tiene errores en Chrome de una manera muy específica
Pasé un tiempo tratando de averiguar por qué no estaba obteniendo los ClientBounds correctos, lo que me llevó a esta pregunta. Dijiste "No estoy seguro de si hay otros casos en los que getBoundingClientRect() devuelve valores incorrectos". Pues resulta que hay más casos. Esta vez en lo que respecta a los SVGs pero es bastante peculiar. Pensé en dejar esto aquí para cualquier otra persona que encuentre su publicación con un problema similar.
getBoundingClientRect() funciona bien en todos los elementos SVG excepto en el caso de que se gire un elemento.
A continuación he dibujado 2 líneas, la de la izquierda es diagonal, la línea de la derecha comienza en vertical como lo representa la línea negra. El cuadro verde es una representación visual de getBoundingClientRect() . Luego aplico la misma rotación de transformación a ambas líneas al mismo tiempo y luego actualizo el cuadro delimitador visual.
Como puede ver a continuación, el cuadro delimitador izquierdo no representa los límites reales, sin embargo, el derecho sí lo hace.
let l1 = document.getElementById("line1"), l2 = document.getElementById("line2"), vis1 = document.createElement("div"), vis2 = document.createElement("div"), r = 0; let setUpVis = (element) => { document.body.appendChild(element) element.style.position = "absolute" element.style.border = "1px solid green" element.style.background = `#0FF0002e` } let updateBounds = (element, displayElement) => { element.setAttribute("transform", `rotate(${r} 80 80)`); let rect = element.getBoundingClientRect() displayElement.style.top = rect.y+"px" displayElement.style.left = rect.x+"px" displayElement.style.width = rect.width+"px" displayElement.style.height = rect.height+"px" } setUpVis(vis1) setUpVis(vis2) setInterval(() => { updateBounds(l1, vis1); updateBounds(l2, vis2); r++; if(r===360) r=0; }, 10) .container { width:170px; height:170px; display:inline-block; } <svg xmlns="http://www.w3.org/2000/svg" class="container"> <line x1="40" y1="40" x2="120" y2="120" stroke="black" stroke-width="2"></line> <line x1="40" y1="40" x2="120" y2="120" id="line1" stroke="red" stroke-width="2"></line> </svg> <svg xmlns="http://www.w3.org/2000/svg" class="container"> <line x1="80" y1="30" x2="80" y2="130" stroke="black" stroke-width="2"></line> <line x1="80" y1="30" x2="80" y2="130" id="line2" stroke="red" stroke-width="2"></line> </svg>