Why don't I see layout/reflow being triggered when changing and retrieving element positions?

Question

Why don't I see layout/reflow being triggered when changing and retrieving element positions?

464 Views Asked by Eric At 19 August 2021 at 18:31

I've been trying to learn more about when layout/reflow gets triggered using Chrome Dev Tools. I have this simple example set up in JSFiddle, where I am changing the "left" position of a group of divs one at a time in a for loop. Then, I'm immediately checking the "left" property, which I understand should force a layout (since the browser must recompute the position of the element in order to provide the updated value):

JavaScript:

const colors = document.body.querySelectorAll("div") 

const button = document.querySelector(".my-button")
button.onclick = handleClick

function handleClick () {
 colors.forEach(color => {
    color.style["left"] = "50px"
    const left = color.style["left"]   <--- This should force a Layout since "left" was just updated
 })  
}

HTML:

<html>
  <head>
  </head>
  <body>
    <button class="my-button">
      Click
    </button>
    <div class="red-color">
      red
    </div>
    <div class="blue-color">
     blue
    </div>
    <div class="green-color">
      green
    </div>
    <div class="yellow-color">
      yellow
    </div>
    <div class="black-color">
      black
    </div>
  </body>
</html>

CSS:

div {
  position: relative
}

In the dev tools, I was expecting to see that on each iteration of the for loop, a layout would be triggered. Specifically, I was looking out for purple Layout bars (one for each iteration) to be under the yellow Function Call bar (which should correspond to the handleClick callback). Instead, it looks like there's a single Layout that occurs after handleClick is called:

Here are the questions I have:

Why don't I see any layouts being triggered during handleClick when I am manipulating the positions of div elements and immediately checking their new positions?
Should I expect to see a new layout being triggered on each iteration of the for loop? I would assume so since the browser needs to provide the updated "left" position on each iteration.

Original Q&A

There are 1 best solutions below

**Kaiido** · Accepted Answer · 2021-08-31T10:31:10.723000

Checking the Element.style.property value will not trigger a reflow no. This value is not the "computed value", and this doesn't require the layout to be recalculated.

const target = document.querySelector(".target");

target.style.left = "0px";

// logs "0px"
// even though the real computed value is "25px"
// from the !important rule in CSS
console.log( target.style.left );

target.classList.remove("begin");
target.style.left = "250px";
// now the computed style is correctly 250px
// but since we didn't trigger a reflow
// the transition doesn't kick in

.target {
  transition: left 2s;
  width: 50px;
  height: 50px;
  background: salmon;
  position: absolute;
}
.begin {
  /* will take precedence over the .style rule */
  left: 25px !important;
}

<div class="target begin"></div>

Maybe you were confusing it with getComputedStyle(element).property which will cause a reflow:

const target = document.querySelector(".target");

target.style.left = "0px";
// this triggers a reflow, the transition will kick in
console.log( getComputedStyle(target).left );
target.style.left = "250px";

.target {
  transition: left 2s;
  width: 50px;
  height: 50px;
  background: salmon;
  position: absolute;
}

<div class="target"></div>

Why don't I see layout/reflow being triggered when changing and retrieving element positions?

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in GOOGLE-CHROME-DEVTOOLS

Related Questions in REFLOW

Trending Questions

Popular # Hahtags

Popular Questions