Chrome scrollIntoView bug

Chrome isn't able to do smooth scrolling actions on multiple elements at the same time (using "scrollIntoView")

HTML

<table>
  <thead>
    <tr>
      <td>Scroll-Scenario</td>
      <td>List scroll type</td>
      <td>Content scroll type</td>
      <td>Working in Chrome</td>
      <td>Working in Firefox</td>
    </tr>
  </thead>
  <tr>
    <td>1)</td>
    <td>scrollIntoView: smooth</td>
    <td>scrollTo: smooth</td>
    <td>no</td>
    <td>yes</td>
  </tr>
  <tr>
    <td>2)</td>
    <td>scrollIntoView: smooth</td>
    <td>-</td>
    <td>yes</td>
    <td>yes</td>
  </tr>
  <tr>
    <td>3)</td>
    <td>-</td>
    <td>scrollTo: smooth</td>
    <td>yes</td>
    <td>yes</td>
  </tr>
  <tr>
    <td>4)</td>
    <td>scrollIntoView: auto</td>
    <td>scrollTo: smooth</td>
    <td>yes</td>
    <td>yes</td>
  </tr>
  <tr>
    <td>5)</td>
    <td>scrollTo: smooth</td>
    <td>scrollTo: smooth</td>
    <td>yes</td>
    <td>yes</td>
  </tr>
</table>
<div id="buttons">
  <button id="scroll-1">1) Scroll both</button>
  <button id="scroll-2">2) Scroll list</button>
  <button id="scroll-3">3) Scroll content</button>
  <button id="scroll-4">4) Scroll list withouth smooth</button>
  <button id="scroll-5">5) Scroll list and content with scrollTo</button><span> |</span>
  <button id="reset">Reset position</button>
</div>
<div id="container">
  <div id="list-container">
    <div class="block"></div>
    <div class="list">
      <div class="list-item">Test 1</div>
      <div class="list-item">Test 2</div>
      <div class="list-item">Test 3</div>
      <div class="list-item">Test 4</div>
      <div class="list-item">Test 5</div>
      <div class="list-item">Test 6</div>
      <div class="list-item">Test 7</div>
      <div class="list-item">Test 8</div>
      <div class="list-item current">Test 9</div>
      <div class="list-item">Test 10</div>
      <div class="list-item">Test 11</div>
      <div class="list-item">Test 12</div>
    </div>
  </div>
  <div id="content-container">
    <div class="content">
      Some content to scroll
    </div>
  </div>
</div>

CSS

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
}

#container {
  display: flex;
}

#container,
#list-container,
#content-container {
  overflow: auto;
}

.list {
  position: relative;
}

.list-item {
  border: 1px solid #ccc;
  width: 250px;
  height: 100px;
}

.list-item.current {
  background: #ccc
}

.content {
  min-width: 600px;
  min-height: 2000px;
  border: 1px solid #ccc;
}

JavaScript

var listItem = document.querySelector('.list-item.current');
var listContainer = document.querySelector('#list-container');
var contentContainer = document.querySelector('#content-container');

var scrollScenario1 = () => {
  listItem.scrollIntoView({ behavior: 'smooth', block: 'center' });
  contentContainer.scrollTo({ top: 0, behavior: 'smooth'});
}
var scrollScenario2 = () => {
  listItem.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
var scrollScenario3 = () => {
  contentContainer.scrollTo({ top: 0, behavior: 'smooth'});
}
var scrollScenario4 = () => {
  listItem.scrollIntoView({ behavior: 'auto', block: 'center' });
  contentContainer.scrollTo({ top: 0, behavior: 'smooth'});
}
var scrollScenario5 = () => {
  var listItemCenterPosition = listItem.offsetTop - (listContainer.getBoundingClientRect().height - listItem.getBoundingClientRect().height)/2;
  
  listContainer.scrollTo({top: listItemCenterPosition, behavior: 'smooth'});
  contentContainer.scrollTo({top: 0, behavior: 'smooth'})
}

var reset = () => {
  listContainer.scrollTop = 0;
  contentContainer.scrollTop = 500;
}

document.getElementById('scroll-1').onclick = scrollScenario1;
document.getElementById('scroll-2').onclick = scrollScenario2;
document.getElementById('scroll-3').onclick = scrollScenario3;
document.getElementById('scroll-4').onclick = scrollScenario4;
document.getElementById('scroll-5').onclick = scrollScenario5;
document.getElementById('reset').onclick = reset;

reset();