Considere el siguiente ejemplo:
const spacerBefore = document.querySelector(".grid>div:first-child"); const spacerAfter = document.querySelector(".grid>div:last-child"); const rangeBetweenSpacers = document.createRange(); rangeBetweenSpacers.setStartAfter(spacerBefore); rangeBetweenSpacers.setEndBefore(spacerAfter); Cuando hay elementos display:content entre spacerBefore y spacerAfter, rangeBetweenSpacers.getBoundingClientRect() devuelve un valor no válido.
Sin embargo spacerBefore.getBoundingClientRect() o spacerAfter.getBoundingClientRect() devuelven el valor correcto.
¿Es esto un error en los navegadores (Chromium lo calcula mal, Firefox devuelve 0), o estoy haciendo algo mal?
document.addEventListener('click', () => { alert(`SpacerSeparation using Range: ${rangeBetweenSpacers.getBoundingClientRect().height}` + `\nSpacerSeparation using getBoundingClientRect: ${spacerAfter.getBoundingClientRect().top -spacerBefore.getBoundingClientRect().bottom }`); }); const scrollContainer = document.querySelector(".grid"); const spacerBefore = document.querySelector(".grid>div:first-child"); const spacerAfter = document.querySelector(".grid>div:last-child"); const rangeBetweenSpacers = document.createRange(); rangeBetweenSpacers.setStartAfter(spacerBefore); rangeBetweenSpacers.setEndBefore(spacerAfter); scrollContainer.querySelector(".grid-cell").scrollIntoView(); .grid { display: grid; grid-template-columns: 1fr; background: lightblue } .grid-row { display: contents; } .grid-cell { background: silver; height: 30px; } <div class="grid" style="height: 150px; overflow: auto; overflow-anchor: none"> <div style="height: 10000px;">spacer before</div> <div class="grid-row"> <div class="grid-cell">Row: Click anywhere in the document</div> </div> <div style="height: 4000px;">spacer after</div> </div>