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

Question

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

При вертикальной прокрутке элементов с помощью жеста 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>

Answer 1

Хитрость в том, чтобы сделать страницы прокручиваемыми в Voiceover, чтобы поддерживать основные области содержимого в нормальном потоке документов, используя position:relativeне absolute, (Я думаю, что переполнение: скрытое и максимальная высота: 100% на элементе тела тоже вызывает проблемы, но мне нужно больше исследовать.) Навигация может использовать фиксированное позиционирование и скользить рядом с остальным содержимым. Одним из ограничений является то, что меню, которое также переполняет высоту страницы, вероятно, не будет прокручиваться в Voiceover, поскольку будет страдать от первоначальной ошибки позиционирования.

Answer 2

Не уверен, поможет ли это, но вы можете попробовать установить фокус VoiceOver вручную. Если вам повезет, это также может привести к правильной позиции.

Если это не работает, вы можете попробовать использовать Element.scrollIntoView() который должен работать в последних версиях Safari Mobile. Но я не уверен, хорошо ли это работает с VoiceOver.