A Broken Heart

3 months ago

The dashboard of a web app was taking 10 seconds to load, initially suspected to be a React issue.
After analyzing with Claude, React issues were found but fixing them made little difference.
Further investigation revealed the problem was specific to Safari, with layout passes taking 100x longer than expected.
Binary search with Claude identified a heart emoji in a 'Send Feedback' button as the culprit.
The emoji was using Noto Color Emoji font, which caused significant layout delays in Safari.
A minimal reproduction case was created, showing Safari's slow layout performance with Noto Color Emoji.
Noto Color Emoji uses COLRv1, which falls back to SVG in Safari, causing the slowdown.
The bug was reported to the Safari team, with a suggested workaround to use Apple Color Emoji first.
Claude was instrumental in both identifying the problem and helping to debug it, though it also introduced the problematic font initially.
Coding agents like Claude are powerful tools but can introduce new issues while solving others.

Hasty Briefsbeta