Safari unterstützt kein CSS für kreisförmige Avatare

Question

Mein Blog verwendet die Gatsby React-Vorlage, aber wenn ich sie auf Safari (iPhone oder Mac) öffne, ist das Avatarbild nicht rund. Einfacher Code-Blog

Dies ist der Stil, den ich für meinen Avatar verwende

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

Answer 1

您应该用这个更改您的 CSS 代码。问题在于 border-radius 值。

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