Desktop: Header: Dropdown menu animation works intermittently

[vfonic]

Describe the current behavior

When you open a header dropdown menu for the first time, the menu opens with a nice slide down (transform translateY) + fade in (opacity) animation.
When closing the menu, the menu instantly disappears, with no animation.
When opening the menu again, the menu sometimes opens with animation, and sometimes without.

Describe the expected behavior

The menu should always open/close with animation.

Version information (Dawn, browsers and operating systems)

• Dawn Version: 7.0.1
• Chrome Version 108.0.5359.124
• macOS Version 13.1

Possible solution

I believe the issue lies with animateMenuOpen animation paired with animation-fill-mode: forwards;.

If I replace that with:

.js details > .header__submenu {
  opacity: 0;
  transform: translateY(-1.5rem);
  transition: all 0.3s ease;
}
.js details[open] > .header__submenu {
  opacity: 1;
  transform: translateY(0);
}

It works perfectly.
I understand there's more to it (prefers-reduced-motion etc.), so I'm not sure what's the best solution that works for everyone.

Perhaps this would suffice:

@media (prefers-reduced-motion) {
  .js details > .header__submenu {
    transition: none;
  }
}

Additional context/screenshots

Latest Dawn theme from Shopify Theme store (I didn't check on latest main branch):

Screen.Recording.2023-01-13.at.16.13.04.mov

[KaichenWang]

This issue was initially addressed with this method in DetailsDisclosure class:

dawn/assets/details-disclosure.js

Lines 17 to 25 in 01a0cb4

	onToggle() {
	if (!this.animations) this.animations = this.content.getAnimations();
	if (this.mainDetailsToggle.hasAttribute('open')) {
	this.animations.forEach(animation => animation.play());
	} else {
	this.animations.forEach(animation => animation.cancel());
	}
	}

Since that change was made, the method has been overridden in HeaderMenu (which extends DetailsDisclosure):

dawn/assets/details-disclosure.js

Lines 41 to 47 in 01a0cb4

	onToggle() {
	if (!this.header) return;
	this.header.preventHide = this.mainDetailsToggle.open;
	if (document.documentElement.style.getPropertyValue('--header-bottom-position-desktop') !== '') return;
	document.documentElement.style.setProperty('--header-bottom-position-desktop', `${Math.floor(this.header.getBoundingClientRect().bottom)}px`);
	}

We would need to call the parent class onToggle() in the child (HeaderMenu) method:

onToggle() {
    super.onToggle();
    ...
}

[cfxd]

This is still an issue—I think it's a browser/rendering issue because I experience the same problems with even the most basic reduced test case.

What about a solution like this? https://codepen.io/Mamboleoo/pen/QWEpLqm (from https://css-tricks.com/how-to-animate-the-details-element-using-waapi/). It could use some tweaks perhaps but overall it appears to work quite well.