Hallo einsiedler,

Firefox hatte ich nicht getestet - ich habe das Problem da auch. Aber nicht immer; es ist intermittierend. Auch Chrome haut zweitweilig das Flyout sofort 'raus, ohne es zu animieren.

Das ist offenbar eine Frage des Timings. Je nachdem, was auf dem Computer los ist, überlagern sich hidden=false und Flyout zeitlich. Wenn der Flyout beginnt, bevor hidden verarbeitet ist, geht's schief. Dann denkt er, er müsse eine Breitenänderung von 0 animieren, und tut nichts. DANACH greift die hidden-Änderung.

Um das zu analysieren, habe ich die Verzögerung des Flyout mal konfigurierbar gemacht. STOP. Nicht übernehmen!

let waitFrames = 3;
requestAnimationFrame(setExpanded);
function setExpanded() {
	waitFrames--;
	if (waitFrames > 0)
		requestAnimationFrame(setExpanded);
	else
		toggle.setAttribute('aria-expanded', newExpanded);
}

Ab waitFrames=3 ist es halbwegs zuverlässig. Aber auch dann nicht immer. Und das ist Sch...eußlich. Auf höhere Werte hatte ich keine Lust, bei 60 Hz Bildrate bedeutet waitFrames=4 schon 66 ms Verzögerung. KANN man mit leben, aber muss man?

Das Problem ist der Umstand, dass das hidden-Attribut ein display:none beinhaltet und das Element damit dem Layout entzieht. Weshalb ich es in meinem ursprünglichen Plan auch nicht drin hatte.

@Gunnar Bittersmann: hidden ist deine Idee, welche Vorschläge hast Du für die Lösung des Timings? Schaffe ich hier üble Workarounds für ein eigentlich ganz anders gelagertes Problem?

Einstweilen hätte ich die Idee, das JS so zu lassen wie es ist - ohne diese waitFrames - und dafür das Verhalten von hidden zu ändern.

Aus dem CSS

[hidden] {
   display: none !important;
}

habe ich dies gemacht:

.flyout-content[hidden] {
   display: block;
   visibility: hidden;
}

Ein eventuelles display:none vom Browser wird damit aufgehoben. Nachteilig ist, dass diese display-Klausel andere display-Modi kaputtmacht (flex, grid, inline, etc) und damit im Allgemeinen so nicht verwendbar ist. Aber das implizite display:none des Browsers muss aufgehoben werden, sonst funktioniert es nicht. Merkwürdig eigentlich, dass es ohne !important klappt, aber da ein !important im Browser-Stylesheet ein !important im Autorenstylesheet ohnehin schlägt (habe ich im Selfwiki so von MDN abgeschrieben), kann man eh nur hoffen, dass der Browser kein !important setzt.

Durch visibility:hidden wird mein ursprüngliches Konzept reaktiviert: Der Flyout-Inhalt nimmt am Layout teil, wird aber nicht angezeigt. Dadurch weiß der Browser jederzeit, wie breit dieser Inhalt ist, und kommt nicht auf die Idee, je nach Timing die Animation eines nullbreites Dings wegoptimieren zu können.

Mir scheint, dass das hidden-Attribut die Wurzel des Timing-Übels ist und man zur ursprünglichen Steuerung zurück sollte. Aber wie gesagt: das könnte alles Workaround sein und ich hätte gerne Gunnars Meinung gehört. Mein Teststand ist hier.

Rolf