Décalage entre background-color et border

Bonjour tout le monde!

Alors voilà, j'ai un petit soucis d'affichage et malgré les heures passées à chercher sur mon meilleur ami Google, pas l'ombre d'une solution...
J'ai une <div> avec bordure, qui contient un titre avec un background-color de la même couleur que la bordure. Sur chrome et Firefox, aucun problème; par contre sur nos amis Edge et IE, et suivant l'écran utilisé, j'ai un décalage entre le background et la bordure... Ci-dessous quelques images pour illustrer mon problème, ainsi que le CSS et HTML.

Merci pour vos lumières!

Affichage sous Chrome et Firefox:

Affichage sous Edge et IE11:


CSS :

.closed-box {
    border: solid 2px;
    border-radius: 20px;
    margin: 5px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    text-align: center;
    box-shadow: 2px 2px 5px #4d4f52;
}

.closed-box__title {
    border-radius: 16px 16px 0 0;
    font-size: 0.975rem;
    margin: 0 0 8px;
    padding: 5px;
    font-weight: 500;
    letter-spacing: .05rem;
}
.c--wbb {
	background-color: #fff; 
	border-color: #0a4393; 
	color: #0a4393;
}
.c--bw {
	background-color: #0a4393; 
	color: #fff; 
}

HTML :

<div class="closed-box c--wbb">
	<h2 class="closed-box__title c--bw">Espace utilisateur</h2>
	<ul>
		<li><a class="link--bo" href="#">Mon profil</a></li>
		<li><a class="link--bo" href="#">Messagerie</a></li>
		<li><a class="link--bo" href="#">Déconnexion</a></li>
	</ul>
</div>

Hello,

Je n'ai pas réussi à reproduire le bug. L'affiche semble correct sur Edge.

J'ai crée un fiddle ici avec quelques modifs. Peut-être essayer avec mon code.

https://jsfiddle.net/2nh3xm8t/2/

Bonjour Allan,
Même problème avec ton code sur IE et Edge
Par contre je pense vraiment qu'il y a un lien avec la taille de la fenêtre ou de l'écran: avec IE, suivant la taille de la fenêtre le bug apparait ou pas... Vraiment bizarre!

Edit:
J'ai trouvé le problème! Mais du coup j'en ai un autre... En fait, le code CSS que j'ai affiché n'est pas mon code, toutes les valeurs en px sont remplacées par la fonction ci-dessous, afin de convertir les px en rem. Du coup peut-être un problème de calcul ou d'arrondi?

@function rem($pixels, $context: $browser-context) {
  @return #{$pixels/$context}rem;
}

Modifié par Mathieu8337 (30 May 2019 - 09:04)

Re,

Je coince...je vois pas trop....faudrait regarder tout le code CSS, surtout les règles de bases, le fichier reset si présent, est-ce dû à l'utilisation de rem, je vois pas trop...j'espère que les autres s'auront t'aider....

Merci en tous cas pour ton aide!
Il me semble avoir vu quelque part un jour que IE ne prenait que 2 chiffres après la virgule sur les décimaux, et avec les rem on en a souvent 3 ou 4... Faut que je vérifie ça!

Bonjour Mathieu8337,

Je n'arrive pas non plus a reproduire le bug,
Que cela soit avec ton code sous Edge et IE11
ou via le jsfiddle de @allan00958
Il est possible d'avoir l'ensemble du code HTML et CSS
Peux ton voir la page quelque part?

Bonjour aliasdmc,

Le site est en construction donc pas encore accessible.
J'ai fait un codepen avec ma fonction: https://codepen.io/anon/pen/NVOEQo
Si il te faut la totalité, contacte moi par MP je te dirai comment y accéder
Merci pour ton aide!