Limits of native animation for HTML5 <details> element

Goal: implement a reliable, cross‑browser animation for the

element’s open/close state.

Constraint: the HTML5 specification leaves the transition unspecified, resulting in varying native behaviors (Chrome/Edge apply a fade, Firefox shows none, Safari’s implementation shifted between versions 14 and 15). This inconsistency makes the default UA animation unpredictable and prone to change with future browser updates.

Questions: What strategy provides a stable animation that will not be overridden by future UA stylesheet changes? Is it safer to apply CSS transitions directly to the

element or to use a JavaScript‑driven class toggle, and how can developers test for regressions when browsers update their default styles?