cottongin/cassette-player
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
No known key found for this signature in database
GPG Key ID: 0ECC91FE4655C262
1 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
index.html
View File

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