CSS Overflow versteckte Eigenschaft funktioniert nicht auf Touch-Geräten

Question

Ich habe einen kreisförmigen vertikalen Fortschrittsbalken erstellt, der vertikal auf Seitenebene Fortschritt füllt. Dafür habe ich zwei divs (äußere div und innere div) erstellt und ich habe die kreisförmige äußere div mit border radius 50% und überlauf versteckt und die innere div mit quadratischen form und breite größer als die breite der äußeren div. Bei der Vervollständigung der Seite nimmt also die Höhe des inneren div zu und es ergibt sich die Wirkung der Füllung des kreisförmigen äußeren div, da die Kanten des inneren div durch die Überlaufeigenschaft des äußeren div verdeckt werden. Es funktioniert gut in Desktop und IPad, aber nicht in den anderen Touch-Geräten (hauptsächlich mobile Geräte). Ich füge das Snippet des css und HTML hinzu, das ich verwende. Es gibt ähnliche Fragen, die auf stackoverflow verfügbar sind, aber keine Antwort löste mein Problem, also bitte nimm es nicht als doppelte Antwort, danke.

#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

Einige Dinge zu beachten:

• Sie brauchen nicht all diese position: absolute ;. Versuche sie zu vermeiden.
• Dezimal Pixel Werte werden dringend davon abgeraten
• Die Breite Ihres inneren Elements war nicht korrekt. Wenn Ihr Außen ist 26px, und Sie möchten die inneren zwei Pixel nach links zu bewegen, das heißt, auch Sie auf der anderen Seite 2px müssen, landen bei 30px
• Getestet habe ich die folgende und das funktioniert auf meinem mobilen Geräten

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