bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix image bubbles display in Safari and Firefox

Browse Source
This commit is contained in:
Jason Zimdars
2024-09-06 11:10:45 -05:00
parent f6cb8f7a62
commit 0c46df4890
3 changed files with 17 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/bubble.css
+14 -12
View File
@@ -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;
}
app/helpers/bubbles_helper.rb
+1 -1
View File
@@ -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)
app/views/bubbles/_bubble.html.erb
+2 -2
View File
@@ -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>