在内核为 Chromium 浏览器更新到 94 后，出现了分类卡片左下角，"more..." 出现在正面的 bug。
# 解决方案
# 作者更新
主题作者更新了主题，修复了一些 bug，也解决这个问题，可以参考以下链接 fix・amehime/hexo-theme-shoka@ad3bb60・GitHub
关于修改方案是找到 themes->shoka->source->css->_common->components->pages->home.styl，修改如下：
$item { | |
position: relative; | |
color: inherit; | |
width: calc(50% - 2rem); | |
min-width: calc(50% - 2rem); | |
height: 14rem; | |
margin: 1rem; | |
opacity: 0; | |
&.show { | |
@extend .slide-up-big-in; | |
opacity: 1; | |
} | |
+mobile() { | |
width: calc(100% - 1rem) !important; | |
min-width: calc(100% - 1rem) !important; | |
margin: 1rem .5rem !important; | |
} | |
} | |
.index.wrap { | |
.btn { | |
position: absolute; | |
bottom: 0; | |
right: 0; | |
//transform-style: preserve-3d; | |
//transform: translateZ(2rem); | |
//backface-visibility: hidden; //1 、注释这里 | |
padding: .3rem 1rem; | |
border-radius: 1rem 0; | |
color: var(--grey-0); | |
background-image: linear-gradient(to right, var(--color-pink) 0, var(--color-orange) 100%); | |
&::before { | |
position: absolute; | |
display: block; | |
content: ''; | |
//transform-style: preserve-3d; | |
//transform: translateZ(-2rem); | |
//backface-visibility: hidden; //2、注释这里 | |
height: calc(100% - 1rem); | |
width: calc(100% - 1rem); | |
border-radius: 5rem; | |
left: .5rem; | |
top: .8rem; | |
box-shadow: 0 0 .6rem .6rem var(--color-pink-a3); | |
background-color: var(--color-pink-a3); | |
} | |
&:hover { | |
transform: translateZ(2.5rem); | |
} | |
&:hover::before { | |
transform: translateZ(-2.5rem); | |
} | |
} | |
//3、加上下面两部分 css 代码 | |
.active .btn { | |
transform-style: preserve-3d; | |
transform: translateZ(2rem); | |
backface-visibility: hidden; | |
&::before { | |
transform-style: preserve-3d; | |
transform: translateZ(-2rem); | |
backface-visibility: hidden; | |
} | |
} | |
// 到这里 | |
.meta { | |
font-size: $font-size-smaller; | |
color: var(--grey-5); | |
.ic { | |
margin-right: .0625rem; | |
} | |
.item + .item { | |
margin-left: .625rem; | |
} | |
&.footer { | |
position: absolute; | |
bottom: .5rem; | |
max-width: calc(100% - 7rem); | |
white-space: nowrap; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
justify-content: flex-start; | |
span { | |
margin-right: .5rem; | |
} | |
} | |
} | |
} |
# 仍出现的问题
在更新后，虽然正面的 "more..." 消失了，仍存在以下问题：
- 鼠标在快速在分类卡片移动时，再 hover 结束后，"more..." 还是会突然闪一下再消失，强迫症不满意了 。
- 主页其他文章列表右下角或者左下角的 "more..." 会变暗很多。
# 我的修改
开始没有注意到作者的更新，自己 F12 作者大大的网站修改，最后发现其实很简单，修改上述文件部分代码如下
$item { | |
position: relative; | |
color: inherit; | |
width: calc(50% - 2rem); | |
min-width: calc(50% - 2rem); | |
height: 14rem; | |
margin: 1rem; | |
opacity: 0; | |
&.show { | |
@extend .slide-up-big-in; | |
opacity: 1; | |
} | |
+mobile() { | |
width: calc(100% - 1rem) !important; | |
min-width: calc(100% - 1rem) !important; | |
margin: 1rem .5rem !important; | |
} | |
} | |
.index.wrap { | |
.btn { | |
position: absolute; | |
bottom: 0; | |
right: 0; | |
//transform-style: preserve-3d; | |
//transform: translateZ(2rem); | |
//backface-visibility: hidden; | |
padding: .3rem 1rem; | |
border-radius: 1rem 0; | |
color: var(--grey-0); | |
background-image: linear-gradient(to right, var(--color-pink) 0, var(--color-orange) 100%); | |
&::before { | |
position: absolute; | |
display: block; | |
content: ''; | |
//transform-style: preserve-3d; | |
//transform: translateZ(-2rem); | |
//backface-visibility: hidden; | |
height: calc(100% - 1rem); | |
width: calc(100% - 1rem); | |
border-radius: 5rem; | |
left: .5rem; | |
top: .8rem; | |
box-shadow: 0 0 .6rem .6rem var(--color-pink-a3); | |
background-color: var(--color-pink-a3); | |
z-index: -1; | |
} | |
&:hover { | |
transform: translateZ(2.5rem); | |
} | |
&:hover::before { | |
transform: translateZ(-2.5rem); | |
} | |
} | |
// .active .btn { | |
// transform-style: preserve-3d; | |
// transform: translateZ(2rem); | |
// backface-visibility: hidden; | |
// &::before { | |
// transform-style: preserve-3d; | |
// transform: translateZ(-2rem); | |
// backface-visibility: hidden; | |
// } | |
// } | |
.meta { | |
font-size: $font-size-smaller; | |
color: var(--grey-5); | |
.ic { | |
margin-right: .0625rem; | |
} | |
.item + .item { | |
margin-left: .625rem; | |
} | |
&.footer { | |
position: absolute; | |
bottom: .5rem; | |
max-width: calc(100% - 7rem); | |
white-space: nowrap; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
justify-content: flex-start; | |
span { | |
margin-right: .5rem; | |
} | |
} | |
} | |
} |
其实就是将作者大大的新加代码删除掉，在 &::before 属性后加了个 z-index: -1
应该没有什么问题了，解决！
