Overflow hidden ne cache pas complètement la div parent avec un rayon de bordure

Question

J'obtiens un certain débordement résiduel de ma mise en page simple ci-dessous. Bien que minime, l'effet est assez évident et ne se produit que lorsque je définis un rayon de bordure. Le comportement attendu est que l'élément div class='inner' le blanc, entièrement couvert div class='outer' le rouge. Cependant, il semble clairement y avoir des débordements résiduels aux deux extrémités de la division.

Exemple :

.outer {
  background-color: red;
  width: 500px;
  height: 50px;
  position: relative;
  overflow: hidden;
  border-radius: 5rem;
}
.inner {
  background: white;
  width: 100%;
  height: 100%;
  position: absolute;
}

<div class="outer">
  <div class="inner"></div>
</div>

Je l'utilise dans le cadre d'un effet de barre de charge dans lequel inner traduit dans le cadre d'une animation lors d'une pièce de théâtre médiatique. J'ai lu quelques autres problèmes qui impliquent l'ajout de propriétés telles que z-index et en ajoutant masks mais ne fonctionne pas pour moi. Lisez aussi les problèmes avec webkit mais je n'ai rien trouvé qui fonctionne dans le cas ci-dessus.

Editar

Pour une illustration plus claire, voir ci-dessous. Overflow hidden est utilisé pour que, lors des traductions internes, tout débordement soit masqué hors de la division parent. Je ne suis pas sûr qu'il y ait d'autres moyens à utiliser. Vous trouverez ci-dessous un exemple de translation de l'axe des x à 10 %. J'essaie d'obtenir l'effet de débordement sans que les bords de la zone où le rayon de la bordure est appliqué ne saignent.

Translate commence à 0%, ce qui est identique à l'exemple ci-dessus.

Ce problème a également été signalé - Problème 491574 : border-radius fait disparaître la couleur de fond.

Et comme pour la question - CSS border radius background colour bleed mais le cas d'utilisation du débordement ne s'applique pas à mon cas.

.outer {
  background-color: red;
  width: 500px;
  height: 50px;
  position: relative;
  border-radius: 5rem;
  overflow: hidden;
}
.inner {
  background: white;
  width: 100%;
  height: 100%;
  position: absolute;
  transform: translateX(10%);
}

<div class="outer">
  <div class="inner"></div>
</div>

Le code ci-dessus, bien qu'il ne soit pas dans sa forme exacte, est intégré dans une application écrite en ReactJS et je rencontre ce problème à la fois dans Chrome et Mozilla.

Answer 1

La réponse que j'ai suggérée comme un doublon de mentions :

La correction se ferait au cas par cas... il s'agirait de réorganiser les éléments de manière à ce qu'ils soient en haut et en bas plutôt qu'en parent et enfant.

Voici donc la solution à votre cas. Vous devez faire en sorte que la couleur rouge de l'arrière-plan soit un enfant de l'élément conteneur... Et la barre de progression par-dessus. Maintenant que le conteneur n'a pas de couleur de fond, rien ne peut saigner à cause de l'anti-aliasing.

De plus, si vous appliquez la même méthode border-radius à la div "background"... Et une bordure blanche de 1px... La magie opère.

Ci-dessous, j'ai animé le width de la .progress-bar sur un intervalle pour simuler votre animation basée sur l'état de réaction.

// Simulating an animation... Just for this demo.

let outer = document.querySelector(".outer")
let progress = document.querySelector(".progress-bar")
let outerWidth = outer.getBoundingClientRect().width
let progressWidth = progress.getBoundingClientRect().width

let interval = setInterval(function(){
  progressWidth = progress.getBoundingClientRect().width
  progress.style.width = progressWidth + 10 + "px"
  if(progressWidth > outerWidth) clearInterval(interval)
},500)

.outer {
  background-color: transparent;
  width: 500px;
  height: 50px;
  position: relative;
  border-radius: 5rem;
  overflow: hidden;
}
.progress-background {
  background: red;
  width: calc(100% - 2px);  /* to compensate the white border space */
  height: calc(100% - 2px); /* to compensate the white border space */
  position: absolute;
  border-radius: 5rem;      /* Same radius than the container */
  border: 1px solid white;  /* white border */
}
.progress-bar {
  background: white;
  width: 0;
  height: 100%;
  position: absolute;
  transition: width 1s;  /* Just to have the animation a bit smooter */
}

<div class="outer">
  <div class="progress-background"></div>
  <div class="progress-bar"></div>
</div>