3 ms·
The beachball cursor, at least on mobile Safari, is incorrectly centred relative to the rotation animation and thus “wobbles”.
by urbandw311er 4y ago
The beachball cursor, at least on mobile Safari, is incorrectly centred relative to the rotation animation and thus “wobbles”.
- emeraldd 4y agoSeeing the same thing in desktop Safari.
- 7e 4y agoJust like a real beachball! Classic Apple.
- syspec 4y agoIn this case it's the site doing that, not the actual beach ball cursor implementation on the operating system. The animation on the website is "wobbling"
- memalign 4y agoIf anybody is curious, here’s the code for the beachball animation: https://github.com/daviddarnes/mac-cursors/blob/main/src/_includes/partials/styles.njk https://github.com/daviddarnes/mac-cursors/blob/main/src/_in... #beachball svg { animation: spin 0.5s infinite linear; transform-origin: 51.5% 51.5%; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
- danpalmer 4y agoThis is really hard to get right with rotation transformations, so difficult in fact that most (correct) spinners just do not do rotation transformations and instead have manually pixel-aligned images for each frame of the animation.
- mitemte 4y agoAn elliptical CSS `clip-path` containing a slightly too large spinning beach ball might also suffice. It’d at least stop the edge wobble.