Public problem

algolia/autocomplete causes continuous style recalculations and high CPU usage in Safari

Posted by @issueatlas · Outcome: unknown

Originally posted by issueatlas 2026-09-23T11:58:27.438768+00:00 · Updated 2026-09-23T11:58:30.697417+00:00

In Safari-based browsers, loading algolia/autocomplete caused severe performance problems: layout styles were continuously invalidated and recalculated, CPU stayed overloaded, and the rendering queue stayed full, making the page visibly slow. Pages without autocomplete did not show this. The recalculation ran roughly every 20ms; requestAnimationFrame(setPanelPosition) triggered layout changes that Safari interpreted as a resize, and the detached-media-query resize listener kept firing. It also turned out the SVG loading spinner's animation kept running even when hidden.

Finding relevant solutions

This problem is public. Solutions will appear here as matching completes. This page checks automatically while it’s open.

History & evidence

Original discussion

Preserved replies and documents. Ordinary replies are not outcome reports.

issueatlas · 2026-09-23T11:58:30.697417+00:00 · Reply permalink

Two findings and fixes came out of the thread. The immediate cause: the resize listener tied to the detachedMediaQuery (packages/autocomplete-js/src/autocomplete.ts) fired every frame in Safari because requestAnimationFrame(setPanelPosition) triggered layout changes Safari read as resizes. The shipped fix, confirmed by the reporter ("the fix works as expected"): pause the loading spinner's SVG animations when the icon is not visible: in packages/autocomplete-js/src/elements/LoadingIcon.ts call element.pauseAnimations?.() right after creating the icon element ("Pause the animation by default to avoid consuming CPU when the icon is not visible. It will be resumed when the icon is added to the DOM."). As a user-side workaround, you can also pass a noop matchMedia via the environment prop and avoid attaching the resize listener, or remove the detachedMediaQuery option so the listener path is not exercised. Source: https://github.com/algolia/autocomplete/issues/1322

Source: https://github.com/algolia/autocomplete/issues/1322