La propriété cachée CSS Overflow ne fonctionne pas sur les périphériques tactiles

Question

J'ai créé une barre de progression verticale circulaire qui se remplit verticalement lors de la progression au niveau de la page. Pour cela j'ai créé deux divs (div externe et div interne) et j'ai fait le div externe circulaire en utilisant le rayon de la frontière 50% et le débordement caché et le div interne avec la forme carrée et la largeur supérieure à la largeur de div externe. Donc, à la fin de la page, la hauteur de la div interne augmente et elle donne l'effet du remplissage de la div externe circulaire lorsque les bords du div interne se cachent par la propriété de débordement de la div externe. Son fonctionne bien dans les ordinateurs de bureau et IPad mais pas dans les autres appareils tactiles (principalement les appareils mobiles). J'ajoute l'extrait du CSS et HTML que j'utilise. Il y a des questions similaires disponibles sur stackoverflow mais aucune de la réponse n'a résolu mon problème, donc plese ne le prend pas comme une réponse en double, merci.

#progress-container { 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 100px; 
 
} 
 

 
#progress-indicator-outer { 
 
    position: absolute; 
 
    width: 25px; 
 
    height: 25px; 
 
    border: 2px solid #fff; 
 
    border-radius: 50%; 
 
    background: #999999; 
 
    overflow: hidden; 
 
} 
 

 
#progress-indicator-inner { 
 
    position: absolute; 
 
    bottom: 0px; 
 
    width: 28px; 
 
    height: 12.5px; 
 
    margin: 0px 0 0 -2px; 
 
    background: #007BAf; 
 
}

<div id="progress-container"> 
 
    <div id="progress-indicator-outer"> 
 
    <div id="progress-indicator-inner"></div> 
 
    </div> 
 
</div>

Answer 1

Quelques choses à noter:

• Vous n'avez pas besoin de toutes ces positions: ;. absolue Essayez de les éviter.
• Les valeurs des pixels décimaux sont fortement déconseillées
• La largeur de votre élément interne n'était pas correcte. Si votre extérieur est 26px, et que vous voulez déplacer les deux intérieure px gauche, cela signifie que vous avez également besoin 2px de l'autre côté, se retrouver à 30px
• Je l'ai testé ce qui suit et cela fonctionne sur mes appareils mobiles

#progress-container { 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 100px; 
 
} 
 

 
#progress-indicator-outer { 
 
    width: 26px; 
 
    height: 26px; 
 
    border: 2px solid #fff; 
 
    border-radius: 50%; 
 
    background: #999999; 
 
    overflow: hidden; 
 
} 
 

 
#progress-indicator-inner { 
 
    position: relative; 
 
    width: 30px; 
 
    height: 13px; 
 
    top: -2px; 
 
    left: -2px; 
 
    background: #007BAf; 
 
}

<div id="progress-container"> 
 
    <div id="progress-indicator-outer"> 
 
    <div id="progress-indicator-inner"></div> 
 
    </div> 
 
</div>