[tabs] Tab transition issue in Preact: new tab content appears before old tab disappears

[Lezvix]

Bug report

Current behavior

When using Base UI Tab components with Preact, there's a visual flickering issue during tab switching. Specifically, when switching between tabs, the new tab content appears before the old tab content disappears, resulting in both tabs being visible simultaneously for a brief moment. This creates an undesirable effect where content from both tabs is rendered at the same time.

Expected #behavior

When switching between tabs, the old tab content should fade out (or hide) completely before the new tab content appears. There should be a clean transition where only one tab's content is visible at any given time. The transition should be smooth without any overlapping or flickering.

Reproducible example

https://stackblitz.com/edit/vitejs-vite-mzgy9913

untitled.mp4

Base UI version

v1.2.0

Which browser are you using?

Firefox 147.0.4
Chrome 145.0.7632.76

Which OS are you using?

Windows 10 19045.5131

Which assistive tech are you using (if applicable)?

None

Additional context

This issue may be related to issue #3958, which addresses similar Preact compatibility problems with transitions.

[linear]

BAS-402

[atomiks]

Started in 1.2.0, likely from the addition of #3880. Seems like the transition hook we use isn't properly compatible with Preact, which would explain the previous popups issue you mentioned

[atomiks]

Workaround: data-ending-style:hidden on <Tabs.Panel>

Haven't checked how animations work in Preact for this.

[Lezvix]

Workaround: data-ending-style:hidden on <Tabs.Panel>

Haven't checked how animations work in Preact for this.

Thanks, this workaround works perfectly

[JoviDeCroock]

This might be related to how we implement flushSync atm, if anyone has time mind trying this out with a patched preact version that uses

import { options } from 'preact';

const flushSync = (callback, arg) => {
	const prevDebounce = options.debounceRendering;
	options.debounceRendering = (cb) => cb();
	const result = callback(arg);
	options.debounceRendering = prevDebounce;
        return result;
};

Mainly asking for someone to try this because the reproduction does not give an error for me and I can merge preactjs/preact#5025 if confirmed

[atomiks]

@JoviDeCroock thanks for looking into this!

Mainly asking for someone to try this because the reproduction does not give an error for me

Can you try with 20x CPU slowdown? I can take a look soon though

Edit: the Stackblitz link in the original message needs the workaround style removed (it was updated)

- text-sm flex-1 outline-none data-ending-style:hidden
+ text-sm flex-1 outline-none

[Lezvix]

Sorry, I accidentally included a workaround in the bug example I submitted, which made it non-reproducible. I've now restored the original version.