cottongin/cassette-player
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases 6 Activity

fix for Safari - boo Safari

Browse Source
This commit is contained in:
cottongin
2026-01-17 14:09:42 -05:00
parent 27b1f0213e
commit 38b94bde04
1 changed files with 18 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
index.html
View File

@@ -336,10 +336,12 @@
.tape-wound { .tape-wound {
position: absolute; position: absolute;
/* Center using top/left 50% with transform */ /* Center using top/left 50% with negative margins (Safari-safe) */
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); /* Use negative margins for centering instead of transform */
margin-left: calc(var(--tape-size, 72px) / -2);
margin-top: calc(var(--tape-size, 72px) / -2);
border-radius: 50%; border-radius: 50%;
/* Darker tape color */ /* Darker tape color */
background: linear-gradient(135deg, #1a1815 0%, #0f0d0a 50%, #050403 100%); background: linear-gradient(135deg, #1a1815 0%, #0f0d0a 50%, #050403 100%);
@@ -350,6 +352,9 @@
/* Size controlled by JavaScript via CSS custom property */ /* Size controlled by JavaScript via CSS custom property */
width: var(--tape-size, 72px); width: var(--tape-size, 72px);
height: var(--tape-size, 72px); height: var(--tape-size, 72px);
/* Safari animation optimizations */
transform-origin: center center;
will-change: transform;
/* Prevent text selection during drag */ /* Prevent text selection during drag */
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
@@ -363,8 +368,8 @@
} }
@keyframes spinTape { @keyframes spinTape {
from { transform: translate(-50%, -50%) rotate(0deg); } from { transform: rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); } to { transform: rotate(360deg); }
} }
.reel-inner { .reel-inner {
@@ -384,11 +389,16 @@
); );
box-shadow: inset 0 0 10px rgba(0,0,0,0.8); box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
z-index: 2; z-index: 2;
/* Center the spool within the reel container */ /* Center the spool within the reel container (Safari-safe) */
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); /* Use negative margins for centering instead of transform */
margin-left: -30px; /* half of 60px width */
margin-top: -30px; /* half of 60px height */
/* Safari animation optimizations */
transform-origin: center center;
will-change: transform;
} }
.reel-inner.spinning { .reel-inner.spinning {
@@ -396,8 +406,8 @@
} }
@keyframes spinSpool { @keyframes spinSpool {
from { transform: translate(-50%, -50%) rotate(0deg); } from { transform: rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); } to { transform: rotate(360deg); }
} }
.reel-inner.spinning { .reel-inner.spinning {