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

user_1517969 0
Viewed 480

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>

flexbox google-chrome css html
2 Answers

The basic rule is: If the css box of a child element of the scroll content changes its height and currently intersects the top border of the viewport, then the scroll position is adjusted so that the top border of said box stays at the current position.

This make sense insofar as you want incrementally loaded content to push down the page, instead of pushing the page header further up.

Firefox (88.0 Linux 64-bit) does that, too, with the only caveat that if the box changes its height repeatedly then it is ignored after the 10th change.

It does not matter whether the box is a direct or indirect child of the scroll content.

There are very few css properties that affect this behavior, I know only two:

  • display: none (perhaps unsurprisingly, as no height of the box is computed)
  • flex-direction: column-reverse on the container (which furthermore has to be flexbox). In this case the behavior is vertically reversed, and a css box height change of a child that intersects the bottom border of the viewport causes the scroll adjustment.
user_26920030

I fixed it in your jsFiddle by adding overflow-anchor: none to a parent element.

overflow-anchor: deactivates Chrome's scroll anchoring, which is what you are seeing here. You can read more about what "Scroll Anchoring" is here: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor/Guide_to_scroll_anchoring

Here's a fixed version of your jsFiddle:

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

#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>

user_163801250
Related