Div Flex Item scrolls to top after an other flex item changes size in Chrome

Question

Like in the title described i have a flex Layout on my website.

I have a menubar on the left which you can hide. Over css-transitions this does look smooth. The Problem is the div right of it. Because of the flex layout it has to resize when I hide the menubar. The div is scrollable.

Now if I hide or show the menubar the div right of it resets its scroll offset to zero. This seems only the case in Chrome. In Firefox, Edge and IE (IE has other problems though) does this work correctly.

It does work correctly if i turn off the css transitions for the menubar, but I want transitions.

It does not work when I use animation instead of transition.

I tried to do a dirty fix with JavaScript to set the scroll offset every millisecond to a fixed value, but all it did was to jump between the two scroll positions really fast...

Any idea how to fix this or what may be the cause?

Minimal example at the end.

edit: My guess was that the div is somehow reloaded, but it seems that this is not the case. The scroll event is fired when the div jumps back to the top... unfortunately this event can not be canceled. Resetting the scroll position via this event is also jumpy.

Opera displays the same Problem.

var menuIsToggled = true;

function toggleMenu() {
  if (menuIsToggled) {
    document.getElementById('left').style.width = '0px';
  } else {
    document.getElementById('left').setAttribute('style', '');
  }
  menuIsToggled = !menuIsToggled;
}

function countScrolls(){
  var e = document.getElementById('scrollCount');
  e.innerHTML++;
}

var transIsToggled = true;
function toggleTrans(bt){
  if(transIsToggled){
    document.getElementById('left').className = "";
    bt.innerHTML = "Turn on transition";
  }
  else{
    document.getElementById('left').className = "trans";
    bt.innerHTML = "Turn off transition";
  }
  transIsToggled = !transIsToggled;
}

div {
  overflow: hidden;
}
#body {
  height: 300px
}
#left {
  width: 100px;
  background-color: green;
}
#right {
  overflow: auto;
  background-color: blue;
}
#rightContent {
  height: 1000px;
  margin: 20px;
  background-color: red;
}
.displayFlex {
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
}
.flexThis1 {
  flex: 1;
  -ms-flex: 1;
  -webkit-flex: 1;
}
.displayFlexRow {
  flex-direction: row;
  -moz-flex-direction: row;
  -webkit-flex-direction: row;
}
.displayFlexCol {
  flex-direction: column;
  -moz-flex-direction: column;
  -webkit-flex-direction: column;
}
.trans {
  transition: width 0.5s;
  -o-transition: width 0.5s;
  -moz-transition: width 0.5s;
  -webkit-transition: width 0.5s;
}

<button onclick="toggleMenu()">Scroll down and click me!</button><button onclick="toggleTrans(this)">Turn off transition</button><br>
Scrolled:<div id="scrollCount">0</div><br>
<div id="body" class="displayFlex displayFlexRow">
  <div id="left" class="trans">
    asdf
  </div>
  <div id="right" class="flexThis1" onscroll="countScrolls()">
    <div id="rightContent">asdf</div>
  </div>
</div>

Thank you for your help!

Answer 1

Not sure why it happens, but the following seems to fix it:

#right {
  height: 100%;
}

var menuIsToggled = true;
function toggleMenu() {
  document.getElementById('left').style.width = menuIsToggled ? '0px' : '';
  menuIsToggled = !menuIsToggled;
}
var transIsToggled = true;
function toggleTrans(bt){
  if(transIsToggled){
    document.getElementById('left').className = "";
    bt.innerHTML = "Turn on transition";
  }else{
    document.getElementById('left').className = "trans";
    bt.innerHTML = "Turn off transition";
  }
  transIsToggled = !transIsToggled;
}

div {
  overflow: hidden;
}
#body {
  height: 300px
}
#left {
  width: 100px;
  background-color: green;
}
#right {
  height: 100%;
  overflow: auto;
  background-color: blue;
}
#rightContent {
  height: 1000px;
  margin: 20px;
  background-color: red;
}
.displayFlex {
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
}
.flexThis1 {
  flex: 1;
  -ms-flex: 1;
  -webkit-flex: 1;
}
.trans {
  transition: width 0.5s;
  -o-transition: width 0.5s;
  -moz-transition: width 0.5s;
  -webkit-transition: width 0.5s;
}

<button onclick="toggleMenu()">Scroll down and click me!</button><button onclick="toggleTrans(this)">Turn off transition</button>
<div id="body" class="displayFlex">
  <div id="left" class="trans">
    asdf
  </div>
  <div id="right" class="flexThis1">
    <div id="rightContent">asdf</div>
  </div>
</div>