Strange occurrence with getBoundingClientRect() function and F5 refresh, what could be causing this odd behavior?

Question

Strange occurrence with getBoundingClientRect() function and F5 refresh, what could be causing this odd behavior?

Apologies for the lengthy code, I have stripped it down multiple times to make it stand-alone. Codepen won't be helpful in this case. You can simply copy and paste the code into an HTML file to see how it behaves.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Garden</title>
</head>
<body>
<style>

#page {      
    display: inline-grid;
    grid-template-columns:auto;
    grid-template-rows: 3;
    grid-template-areas: 
    "header"
    "map"
    "footer";
}
  
#header {       
    grid-area: header;
    color: white;
    background-color: grey;
    border: 2px solid grey;
    border-bottom: none;
    border-radius: 10px 10px 0px 0px;   
    padding: 5px;  
}

#map {   
    grid-area: map;
    border: 2px solid grey;
    border-top: none;
    padding: 5px;
}   

#imagewrapper {    
    position: relative;
    border: 1px solid grey;
    padding: none;
    margin: none;
}

#mapimage { 
    display: inline;
    max-width: 100%;
    margin-bottom: -4px;
}

.pin_container {
    
    position: absolute;
    border: 2px solid grey;
    border-radius: 10px 10px 10px 10px;
    cursor: grab;
    padding: 3px;
}

#footer {
    grid-area: footer;
    color: white;
    background-color: grey;
    border: 2px solid grey;
    border-right: none;
    border-radius: 0px 0px 10px 10px;   
    padding: 5px;  
}
</style>
<div id='page'>
    <div id='header'>De Botanische Tuin Kerkrade</div>
    <div id='map' data-id='14'>
        <div id='imagewrapper'>
            <img id='mapimage' src='https://i.ibb.co/cQF07s8/map-g3-v1.png'>
            <div id='b27' class='pin_container' style='left:479px; top:792px;' data-img='map_g3_b27_v0.png'>Hubertus Borders</div>
            <div id='b22' class='pin_container' style='left:385px; top:568px;' data-img='map_g3_b22_v0.png'>De Oude Tuin</div>
            <div id='b9' class='pin_container' style='left:400px; top:400px;' data-img='map_g3_b9_v0.png'>De Thematuin</div>
        </div>
    </div>
    <div id='footer'><span class='nav_current'>De Botanische Tuin Kerkrade</span></div>
</div>

<script type="text/javascript">

    var map  = document.getElementById('imagewrapper').getBoundingClientRect();
    var pins = document.querySelectorAll('.pin_container');
    var pin;
    var div;
    var loc_x;
    var loc_y;

    for ( var i = 0; i < pins.length; i++ ) { 
        
        pin    = pins[i];
        div    = pin.getBoundingClientRect();
     
        console.log( pin.textContent+"("+pin.id+") - imagewrapper.width="+map.width+", pin_container.width="+div.width );
    }
</script>
</body>
</html>

Despite the log output looking fine when the page is initially loaded, I encounter issues upon refreshing:

Hubertus Borders(b27) - imagewrapper.width=190.93333435058594, pin_container.width=68.66
De Oude Tuin(b22) - imagewrapper.width=190.93333435058594, pin_container.width=44.64
De Thematuin(b9) - imagewrapper.width=190.93333435058594, pin_container.width=79.31

The widths of both the map and the pins seem inaccurate after a refresh. Prior to simplifying the code, different results were observed when using ctrl+f5. It's challenging to pinpoint the exact cause of this erratic behavior. Testing across Chrome and Firefox browsers shows inconsistent outputs. Chrome consistently displays incorrect values even with a fresh load or forced reload.

While the rendering appears as expected visually, regardless of the browser or action taken, the centering script utilizing getBoundingClientRect() gets disrupted.

Any insights on what might be causing this?

javascript html css

Answer 1

Answer №1

The issue is not caused by the image loading late, but rather it indirectly triggers it.

To replicate the problem, simply execute the loop provided in the code a second time in the console.

Instead of providing a direct answer, this explanation delves into the issue.

We are facing a scenario with absolutely positioned elements which lack intrinsic dimensions and rely on their content, such as text, making them unpredictable.

When applying positioning to an element using properties like top, bottom, left, or right, the movement stops at the edges and starts shrinking instead of moving until it reaches the limit set by the longest word.

This behavior explains what is occurring here: before the image loads, the parent's width is smaller causing the elements to be positioned beyond the left edge, resulting in shrinkage based on certain width values. After the image loads, the parent's width increases, affecting the elements' widths accordingly.

A potential solution could involve defining a fixed width/height for the positioned elements or utilizing white-space: nowrap.

Given uncertainty about how your application will scale, providing a permanent solution may be challenging if setting a width/height is undesirable.

Answer 2