From 0c46df4890923b49a9d98bff7f18be1bae709ebb Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Fri, 6 Sep 2024 11:10:45 -0500
Subject: [PATCH] Fix image bubbles display in Safari and Firefox

---
 app/assets/stylesheets/bubble.css  | 26 ++++++++++++++------------
 app/helpers/bubbles_helper.rb      |  2 +-
 app/views/bubbles/_bubble.html.erb |  4 ++--
 3 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/app/assets/stylesheets/bubble.css b/app/assets/stylesheets/bubble.css
index f15f0a4dd..9df7b7e17 100644
--- a/app/assets/stylesheets/bubble.css
+++ b/app/assets/stylesheets/bubble.css
@@ -1,5 +1,6 @@
 :root {
   --bubble-size: 30vw;
+  --bubble-shift: 10deg;
 }
 
 .windshield {
@@ -13,7 +14,6 @@
 .bubble {
   --hover-size: 0;
   --bubble-color: var(--color-ink);
-  --bubble-rotate: 20deg;
 
   aspect-ratio: 1;
   block-size: var(--bubble-size);
@@ -51,7 +51,11 @@
       z-index: 999;
 
       .bubble__svg {
-        transform: rotate(calc(var(--bubble-rotate) + 10deg));
+        transform: rotate(calc(var(--bubble-rotate) + var(--bubble-shift)));
+      }
+
+      .bubble__image {
+        transform: rotate(calc(var(--bubble-rotate) + var(--bubble-shift)));
       }
     }
   }
@@ -177,28 +181,25 @@
 }
 
 .bubble__image {
-  -webkit-mask-image: url(blob.svg);
-  -webkit-mask-size: contain;
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  block-size: 100%;
-  display: grid;
   mask-image: url(blob.svg);
   mask-position: center;
   mask-repeat: no-repeat;
-  mask-size: contain;
-  place-items: center;
+
+  block-size: 100cqi;
+  inline-size: 100cqi;
   pointer-events: none;
   transform: rotate(var(--bubble-rotate));
+  transition: all 0.2s ease;
 
   @media (hover: hover) {
     .windshield .bubble:hover & {
-      transform: rotate(calc(var(--bubble-rotate) + 10deg));
+      transform: rotate(calc(var(--bubble-rotate) + var(--bubble-shift)));
     }
   }
 
   img {
-    block-size: 100%;
+    block-size: 100cqi;
+    inline-size: 100cqi;
     object-fit: cover;
     transform: rotate(calc(var(--bubble-rotate) * -1));
   }
@@ -222,6 +223,7 @@
   scale: 1.1;
   stroke: var(--bubble-color);
   stroke-width: 1.1rem;
+  transform: rotate(var(--bubble-rotate));
   transition: all 200ms ease-out;
   z-index: -1;
 }
diff --git a/app/helpers/bubbles_helper.rb b/app/helpers/bubbles_helper.rb
index 263244705..d8fd81803 100644
--- a/app/helpers/bubbles_helper.rb
+++ b/app/helpers/bubbles_helper.rb
@@ -4,7 +4,7 @@ module BubblesHelper
   MIN_THRESHOLD = 7
 
   def bubble_rotation(bubble)
-    BUBBLE_ROTATION[Zlib.crc32(bubble.to_param) % BUBBLE_ROTATION.size]
+    "--bubble-rotate: #{ BUBBLE_ROTATION[Zlib.crc32(bubble.to_param) % BUBBLE_ROTATION.size] }deg;"
   end
 
   def bubble_size(bubble)
diff --git a/app/views/bubbles/_bubble.html.erb b/app/views/bubbles/_bubble.html.erb
index 9d000af09..babbc1dc3 100644
--- a/app/views/bubbles/_bubble.html.erb
+++ b/app/views/bubbles/_bubble.html.erb
@@ -1,7 +1,7 @@
-<div class="bubble" data-controller="upload-preview" style="view-transition-name: bubble-<%= bubble.id -%>; --bubble-color: <%= bubble.color %>; --bubble-rotate: <%= bubble_rotation(bubble) -%>deg; <%= bubble_size(bubble) %>">
+<div class="bubble" data-controller="upload-preview" style="view-transition-name: bubble-<%= bubble.id -%>; --bubble-color: <%= bubble.color %>; <%= bubble_rotation(bubble) -%> <%= bubble_size(bubble) %>">
   <h1 class="bubble__title"><%= bubble.title %></h1>
 
-  <svg class="bubble__svg" viewBox="0 0 990 990" xmlns="http://www.w3.org/2000/svg" transform="rotate(<%= bubble_rotation(bubble) -%>)"><path d="m0 0h990v990h-990z" fill="none" stroke="none" /><path d="m391.65 879.47c-110.52-15.95-212.21-91.86-255.92-191.23-66.78-143.65-41.62-347.61 48.08-481.17 368.33-516.3 1252.97 520.2 451.03 660.78-44.07 8.84-88.98 13.49-133.01 15.68-36.69 2-73.37 1.91-109.99-4.03z"/></svg>
+  <svg class="bubble__svg" viewBox="0 0 990 990" xmlns="http://www.w3.org/2000/svg"><path d="m0 0h990v990h-990z" fill="none" stroke="none" /><path d="m391.65 879.47c-110.52-15.95-212.21-91.86-255.92-191.23-66.78-143.65-41.62-347.61 48.08-481.17 368.33-516.3 1252.97 520.2 451.03 660.78-44.07 8.84-88.98 13.49-133.01 15.68-36.69 2-73.37 1.91-109.99-4.03z"/></svg>
 
   <%= link_to bubble, class: "bubble__link" do %>
     <span class="for-screen-reader"><%= bubble.title %></span>