VoiceOver не прокручивает элементы вне поля зрения должным образом

HTML фиксированный footer с вертикально прокручиваемым контентом (стандартный материал, я надеюсь, переполнение: авто и т.д.).

При вертикальной прокрутке элементов с помощью жестового нажатия VoiceOver, как только фокус VoiceOver попадает в элементы в нижней части видимого вида, фокус VoiceOver перемещается по элементам правильно, но полоса прокрутки только прокручивает половину высоты элемента, поэтому фокус движения VoiceOver ниже видимой области.

РЕДАКТИРОВАТЬ Обновленный фрагмент, на предыдущей высоте контейнера было меньше 50%, обновлено для ясности, чтобы показать, что высота не имеет значения.

Спасибо заранее.

.scrollContainer {
  position: absolute;
  overflow: auto;
  top: 0;
  width: 100%;
  bottom: 100px;
}

.rightData {
  float: right;
  padding-right: 10px;
}

.stepData {
  padding: 0px;
  list-style-type: none;
  margin-top: 0;
  margin-bottom: 0;
}

.stepData > li {
  height: 42px;
  border-top: 1px solid black;
  padding: 12px 20px;
  font-size: 1.25em;
}

#footer {
  position: absolute;
  height: 100px;
  width: 100%;
  bottom: 0;
  background-color: cyan;
}

<div style="height:500px;">
 <div id="container" class="scrollContainer">
        <ul class="stepData" style="padding:0px;">
            <li role="button" aria-label="date">06/01<span class="rightData" aria-label="steps">1001</span></li>
            <li role="button" aria-label="date">06/02<span class="rightData" aria-label="steps">1002</span></li>
            <li role="button">06/03<span class="rightData">1003</span></li>
            <li role="button">06/04<span class="rightData">1003</span></li>
            <li role="button">06/05<span class="rightData">1005</span></li>
            <li role="button">06/06<span class="rightData">1006</span></li>
            <li role="button">06/07<span class="rightData">1007</span></li>
            <li role="button">06/08<span class="rightData">1008</span></li>
            <li role="button">06/09<span class="rightData">1009</span></li>
            <li role="button">06/10<span class="rightData">1010</span></li>
            <li role="button">06/11<span class="rightData">1011</span></li>
            <li role="button">06/12<span class="rightData">1012</span></li>
            <li role="button">06/13<span class="rightData">1013</span></li>
            <li role="button">06/14<span class="rightData">1014</span></li>
            <li role="button">06/15<span class="rightData">1015</span></li>
            <li role="button">06/16<span class="rightData">1016</span></li>
            <li role="button">06/17<span class="rightData">1017</span></li>
            <li role="button">06/18<span class="rightData">1018</span></li>
            <li role="button">06/19<span class="rightData">1019</span></li>
            <li role="button">06/20<span class="rightData">1020</span></li>
            <li role="button">06/21<span class="rightData">1021</span></li>
            <li role="button">06/22<span class="rightData">1022</span></li>
            <li role="button">06/23<span class="rightData">1023</span></li>
            <li role="button">06/24<span class="rightData">1023</span></li>
            <li role="button">06/25<span class="rightData">1025</span></li>
            <li role="button">06/26<span class="rightData">1026</span></li>
            <li role="button">06/27<span class="rightData">1027</span></li>
            <li role="button">06/28<span class="rightData">1028</span></li>
            <li role="button">06/29<span class="rightData">1029</span></li>
            <li role="button">06/30<span class="rightData">1030</span></li>
            <li role="button">07/01<span class="rightData">1031</span></li>
            <li role="button">07/02<span class="rightData">1032</span></li>
            <li role="button">07/03<span class="rightData">1033</span></li>
            <li role="button">07/04<span class="rightData">1034</span></li>
            <li role="button">07/05<span class="rightData">1035</span></li>
            <li role="button">07/06<span class="rightData">1036</span></li>
            <li role="button">07/07<span class="rightData">1037</span></li>
            <li role="button">07/08<span class="rightData">1038</span></li>
            <li role="button">07/09<span class="rightData">1039</span></li>
        </ul>
    </div>
    <div id="footer">
    <p>
    footer
    </p>
    </div>
</div>