I loved that after seeing the comparisons, you can notice that the article was writing in Signifier. Did not love the CPU usage of the page (at lease for me, it rocketed up. macOS, Safari)
Interesting cause. I wonder how long we’ll need to manually specify what transitions. It seems like an optimization problem that the browser could solve on its own, but I guess not yet.
React is the new PHP: a dangerously welcoming ecosystem for amateurs. If you look at the trace, you see it's firing a timer for LazyImage every 300 milliseconds that that's causing constant repaints. It's terrible, but no one believes in craftsmanship anymore. :-)
// Give react a chance to render before starting to poll
// This gives us more chance of the opacity transition being visible
// Should also fix rendering glitches in firefox where native image placeholder shows briefly
setTimeout(pollForComplete, 300);
},
Hmm, settimeout is one shot, setinterval is the repeating one, unless that’s calling itself recursively?
Anyway using delays hoping that things are in place in 300ms is asking for trouble, I thought reacts whole thing was to put everything in a component lifecycle callback so everything happens in the order it needs to
Hello! Thanks for having a fossick through our code ;) Happy to report that the issue has now been resolved. I've added a post explaining the underlying cause a little up in the thread. (I'm not sure how notifications work on HN, so figured I'd drop a reply here, too).
For those interested in the underlying cause, it seems to have been a bug in Safari. The following CSS triggered infinite repaints:
The solution was to simply be more specific: