dropdown-menu flashes and causes layout shift while loading

[BoPeng]

Describe the bug When a page with dropdown page is loaded, the dropdown menu displays and hides quickly. The effect is clear on a slow machine and can be captured as follows, but not visible while loading index.html of the theme, likely because the pure-html page loads fast. The "flash" is confirmed to be from the drodown-menu and causes "layout shift" warnings.

To Reproduce Cannot really reproduce with the theme headers, especially with the slow preloading block.

Expected behavior No flash of menu while loading headers.

Screenshots

Desktop (please complete the following information):

• OS: mac osx
• Browser: chrome
• Version: 103.0.5060.53

Additional context

Further debugging shows that dropdown-menu uses opacity:0 without display: none. Adding display: none and display: block to .dropdown-menu.show seems to solve the problem.

@include media-breakpoint-up(lg) {
     .navbar-nav{
.dropdown-menu {
            opacity       : 0;
            pointer-events: none;
            margin        : 0;
            border-radius : $dropdown-border-radius;
        }