Consider following example:
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);
When there are display:content elements between spacerBefore and spacerAfter, then
rangeBetweenSpacers.getBoundingClientRect() returns invalid value.
However spacerBefore.getBoundingClientRect() resp spacerAfter.getBoundingClientRect() return correct value.
Is this a bug in browsers (Chromium calculates it wrong, Firefox returns 0), or am I doing something wrong?
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>