Open keskival opened 1 year ago
Interestingly clicking the dark mode button refreshes the rendering and fixes the glitch temporarily.
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.
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...
同样遇到移动端导航栏下拉不正常的情况,header-wrapper
高度大于header-inner
,导致导航栏下部无毛玻璃效果:
Android Mobile Chrome version: 110.0.5481.154
my blog
repo author's blog
I fixed this on my own site with this (disregard the removed line in the diff): https://github.com/keskival/costacoders.es/commit/4dfd23e83b5853cc802691cf8e7c79db8b2f54a8
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.
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