Safari ne prend pas en charge CSS pour les avatars circulaires

Question

Mon blog utilise le modèle Gatsby React, mais lorsque je l'ouvre sur Safari (iPhone ou Mac), l'image de l'avatar n'est pas ronde. Blog de code simple

C'est le style que j'utilise pour mon avatar

.bio-avatar {
  margin-right: var(--spacing-4);
  margin-bottom: var(--spacing-0);
  min-width: 50px;
  border-radius: 100%;
 }

Answer 1

Vous devriez changer votre code CSS avec ceci. Le problème vient de la valeur border-radius.

.bio-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
}