VoiceOver doesn't scroll elements out of view properly

Question

HTML fixed footer with vertically scrolling content (standard stuff I hope, overflow:auto etc.).

When vertically scrolling through elements via right-swipe VoiceOver gesture as soon as VoiceOver focus hits the elements at the bottom of the visible view the VoiceOver focus moves through elements correctly but the scrollbar only scrolls half the element height hence the VoiceOver focus moves below the visible area.

EDIT Updated snippet, in previous one height of container was less that 50%, updated for clarity to show that the height doesn't matter.

Thanks in advance.

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

Answer 1

Not sure whether this helps but you can try setting the VoiceOver focus manually. If you're lucky, this might also scroll to the correct position.

If that does not work, you could try to use Element.scrollIntoView() which should work in the latest versions of Safari Mobile. But I am not sure whether that also plays nicely with VoiceOver.

Answer 2

The trick to making pages scrollable in Voiceover is to keep main content areas in the normal document flow using position:relative, not absolute. (I think overflow: hidden and max-height: 100% on the body element causes problems too, but I need to do more research.) The nav can use fixed positioning and slide in next to the rest of the content. One limitation is that a menu that also overflows the page height probably won’t scroll in Voiceover, as it will suffer from the original positioning bug.