VoiceOver ne fait pas défiler les éléments correctement hors de vue

Question

Pied de page fixe HTML avec contenu à défilement vertical (matériel standard j'espère, débordement: automatique, etc.). Lorsque vous faites défiler verticalement les éléments via le geste VoiceOver à droite dès que le focus VoiceOver atteint les éléments en bas de la vue visible, le focus VoiceOver passe correctement dans les éléments mais la barre de défilement ne fait défiler que la moitié de l'élément. se déplace en dessous de la zone visible.

EDIT Extrait mis à jour, dans la précédente hauteur du conteneur était inférieure à 50%, mise à jour pour plus de clarté pour montrer que la hauteur n'a pas d'importance.

Merci d'avance.

.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

L'astuce pour faire des pages dans scrollable VoiceOver est de garder les principaux domaines de contenu dans le flux normal du document à l'aide position:relative, non absolute. (Je pense que overflow: hidden et max-height: 100% sur l'élément body provoque des problèmes aussi, mais j'ai besoin de faire plus de recherche.) Le nav peut utiliser un positionnement fixe et glisser à côté du reste du contenu. Une limitation est qu'un menu qui déborde également la hauteur de la page ne défilera probablement pas dans Voiceover, car il souffrira du bogue de positionnement d'origine.

Answer 2

Vous ne savez pas si cela vous aide mais vous pouvez essayer setting the VoiceOver focus manually. Si vous êtes chanceux, cela pourrait aussi faire défiler la page vers la bonne position.

Si cela ne fonctionne pas, vous pouvez essayer d'utiliser Element.scrollIntoView() qui devrait fonctionner dans les dernières versions de Safari Mobile. Mais je ne suis pas sûr que cela joue aussi bien avec VoiceOver.