Summary

The spin-pulse animation shows visual instability (wobbles) in Safari at certain font sizes. The same animation works smoothly in Chrome and Firefox. This appears to be related to Safari's sub-pixel rendering behavior.

Background

While implementing Font Awesome's animation utilities in Web Awesome's icon component (PR #1971), we noticed that spin-pulse wobbles in Safari at specific font sizes. Other animations (beat, bounce, fade, beat-fade, flip, shake, spin, spin-reverse) work correctly across all browsers.

Expected vs Actual Behavior

• Expected: spin-pulse should run smoothly without wobbles in Safari at all font sizes
• Actual: spin-pulse shows visible wobbles in Safari at certain font sizes; works fine in Chrome/Firefox

Demo

• FA 7 + Web Fonts + Spin Pulse Animations
• FA 7 + SVG + Spin Pulse Animations

Questions

1. Is this a known Safari rendering issue with Font Awesome's spin-pulse animation?
2. Are there CSS properties or techniques that should be applied to ensure stable spin-pulse animations in Safari? (e.g., transform: translateZ(0), will-change, backface-visibility)
3. Is there a relationship between font size and Safari's sub-pixel rendering that causes this issue?

Environment

• Font Awesome version: 7.x
• Use: Hosted Kits
• Tech Stack: Web Fonts AND SVG + JS
• Browsers: Safari (wobbles occur), Chrome/Firefox (works correctly)

Reproducible test case

https://codepen.io/fontawesome/pen/GgqvMQo

Screenshots

No response

Font Awesome version

v7.1.0 (latest 7.x via Kits)

Serving

Kit

Implementation

CSS

Browser and Operating System

• Safari 26.2 on Mac OS X.

Web bug report checklist

• I have included a test case because my odds go way up that the team can fix this when I do
• I have searched for existing issues and to the best of my knowledge this is not a duplicate