Mobile Chrome drop-down menu broken

[keskival]

Affects all Hugo Meme sites, e.g. https://costacoders.es and https://blog.chunjiw.net .

Mobile Bing and mobile Firefox show the menu correctly. This would seem to be a Chrome issue which might be amenable to a CSS workaround.

Android Mobile Chrome version: 110.0.5481.65

[keskival]

[keskival]

Interestingly clicking the dark mode button refreshes the rendering and fixes the glitch temporarily.

[reuixiy]

Weird, I can reproduce this and hovering my mouse over it can also solve the glitch. This may be a problem with backdrop-filter. Haven't found any workaround yet.

[keskival]

If I comment out these, it works:

            .header.open {
                .nav {
                    display: block;
                    //animation: appear $duration;
                    //animation-iteration-count: 1;
                    //animation-fill-mode: forwards;
                }

However, then it doesn't animate.

Alternatively, adding z-index for the menu in the animation keyframe fixes this without breaking animation:

                @keyframes appear {
                    0% {
                        opacity: 0;
                        height: 0;
                        margin: 0;
                        transform: scaleY(0);
                        transform-origin: top;
                    }
                    100% {
                        opacity: 1;
                        z-index: 100;
                        height: $navHeight;
                        margin: 2em 0;
                        transform: scaleY(1);
                        transform-origin: top;
                    }
                }

Curiously, adding the same z-index to the 0% keyframe breaks it again, as does a z-index: 99; for the 0% keyframe, but for example z-index: 0; for the 0% keyframe works...

[3verness]

同样遇到移动端导航栏下拉不正常的情况，header-wrapper高度大于header-inner，导致导航栏下部无毛玻璃效果： Android Mobile Chrome version: 110.0.5481.154 my blog repo author's blog

[keskival]

I fixed this on my own site with this (disregard the removed line in the diff): https://github.com/keskival/costacoders.es/commit/4dfd23e83b5853cc802691cf8e7c79db8b2f54a8

[fengguowudi]

I fixed this on my own site with this (disregard the removed line in the diff): keskival/costacoders.es@4dfd23e

You can present a PR to the author.