css: fix a border-radius bug in safari, somehow

1 files changed, 11 insertions, 1 deletions

diff --git a/src/static/site6.css b/src/static/site6.css
index 44634f1c..341414a3 100644
--- a/src/static/site6.css
+++ b/src/static/site6.css
@@ -737,7 +737,8 @@ ul.image-details li {
   height: auto;
 }
 
-.square .image-container {
+.square .image-container,
+.square .image-link {
   width: 100%;
   height: 100%;
 }
@@ -1106,6 +1107,15 @@ h1 a[href="#additional-names-box"]:hover {
   height: 100%;
 }
 
+.image-link .image-inner-area {
+  /* Jankily fix a rendering issue with border-radius on Safari.
+   * The `-webkit-` prefix is only to keep this from applying on
+   * other browsers (well, Firefox), where it doesn't *break*
+   * anything, but also isn't necessary.
+   */
+  -webkit-transform: translateZ(0);
+}
+
 img {
   object-fit: cover;
 }