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

Question

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

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

EDIT Обновленный фрагмент, на предыдущей высоте контейнера был менее 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. (Я думаю, что переполнение: скрытое и max-height: 100% на элемент тела также вызывает проблемы, но мне нужно сделать больше исследований.) Nav может использовать фиксированное позиционирование и перемещаться рядом с остальной частью содержимого. Одно из ограничений заключается в том, что меню, которое также переполняет высоту страницы, вероятно, не будет прокручиваться в Voiceover, так как оно будет страдать от исходной ошибки определения местоположения.

Answer 2

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

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