v147 · JavaScript · CSS
Compatibility Lab
Probes element-scoped view transitions via feature detection, then runs two rapid scope-local transitions to confirm whether the browser can isolate transition roots and fall back cleanly.
API probes
Live concurrent transition test
Click both "Shuffle" buttons quickly, or use "Run both" to fire both scopes in rapid succession. In a supporting browser, each list gets its own transition root while the rest of the page stays live.
List A
List B
Click shuffle on either list to test.
transition log...
Fallback pattern
/* Detect element-scoped startViewTransition */
const SUPPORTS_ELEMENT_VT =
typeof Element !== 'undefined' &&
typeof Element.prototype.startViewTransition === 'function';
/* Wrapper that degrades gracefully */
function transitionElement(el, updateFn) {
if (typeof el.startViewTransition === 'function') {
// Chrome 147+: scoped to this element, concurrent transitions possible.
return el.startViewTransition(updateFn);
}
if (typeof document.startViewTransition === 'function') {
// Chrome 111+: global view transition, so treat it as a fallback.
return document.startViewTransition(updateFn);
}
// Fallback: instant update. Lack of support must not block the DOM change.
updateFn();
return Promise.resolve();
}
/* Usage */
const panel = document.querySelector('.panel');
transitionElement(panel, () => {
panel.innerHTML = newContent;
});
see also
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗