Scroll position affected by internal layout changes inside a page element (Chrome)?

https://jsfiddle.net/gxas8h7L/5/

Run the fiddle and scroll down until the top of the page intersect one of the red sub-boxes. Observe that the scroll position changes as "world" is periodically toggled. (looks like the whole page jumps up/down)

The toggling does not affect the parent height. It's strictly an "component-internal" change.

The effect persist if the gray boxes are absolutely positioned.

The culprit seems to be the center alignment (flex) of the item inside the red box (align-items: center;) Seems like chrome really prefer for "hello" to not move..

Is this a Chrome bug or some strange css-feature?

Does not happen in Firefox.

Tested in Chrome Version 85.0.4183.102 (Official Build) (64-bit) Linux

setInterval(
    () => {
        $(".foo").toggle()
    console.log(document.scrollingElement.scrollTop)
}, 800)
#c {
  height: 3000px;
}

#x1 {
  top: 10px;
}
#x2 {
  top: 130px;
}
#x3 {
  top: 260px;
}

.item {
  /* position: absolute; */
  left: 0px;
  height: 100px;
  width: 400px;
  background-color: gray;
  padding: 4px;
  margin-top: 10px;
}

.bar {
  display: flex;
  align-items: center;
  height: 70px;
  background-color: red;
}

.elem {
  border: 2px solid black;
  margin-left: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="c">
  <div id="x1" class="item">
    <div class="bar">
      <div class="elem">
        <div>hello</div>
        <div class="foo">world</div>
      </div>
    </div>
  </div>
  <div id="x2" class="item">
    <div class="bar">
      <div class="elem">
        <div>hello</div>
        <div class="foo">world</div>
      </div>
    </div>
  </div>
  <div id="x3" class="item">
    <div class="bar">
      <div class="elem">
        <div>hello</div>
        <div class="foo">world</div>
      </div>
    </div>
  </div>
</div>