此处记录个人折腾博客过程中,挠掉不少头发的前端踩坑笔记。将以时间倒序更新。

首页哔哔闪念轮播字体模糊

2023.6.25 突然发现首页轮播哔哔字体怎么是糊的。排查发现是 css 样式设置的 will-change 属性导致的。

原因:

ChatGPT:will-change 是 CSS3 中的一个属性,用于告诉浏览器哪些属性将要被改变,从而使浏览器在元素实际发生变化之前对其进行优化,提高页面性能。使用 will-change 属性可以让浏览器提前为元素做好一些优化工作,从而在元素实际发生变化时能够更快地响应。

1
2
3
4
5
6
7
will-change 属性可以接受多个值,用逗号分隔。常用的值包括:  

auto:默认值,表示浏览器自行决定哪些属性需要被优化。
scroll-position:告诉浏览器元素的滚动位置将要发生变化,从而使浏览器在滚动时能够更快地响应。
contents:告诉浏览器元素的内容将要发生变化,从而使浏览器在元素内容发生变化时能够更快地响应。
transform:告诉浏览器元素的变换将要发生变化,从而使浏览器在元素变换时能够更快地响应。
opacity:告诉浏览器元素的透明度将要发生变化,从而使浏览器在元素透明度发生变化时能够更快地响应。

在上述问题中,之前不知道啥时候给 #bbtalk 添加了 will-change: transition; 属性,原本是想让浏览器提前准备,更好地响应。但是但该属性给纯文本添加后,就会导致模糊问题。
解决方法:

设置为 will-change: auto; 即可解决。

1
2
3
#bbtalk {
will-change: auto;
}

友链滚动效果——奇怪的对齐问题

2023.5.14,雨天,就没出去溜达。于是乎,继续打开电脑,对Heo博客做像素级的致(chao)敬(xi)。洪哥那个友链页面,太高大上了,必须安排。

html结构都很简单,进行到css部分时,诡异的事情发生了:

无规律的不对齐问题

如上图,动画基本搞出来后,发现怎么跟想象中的不一样?为什么第一排头像正常水平对齐,第二排就不行?查看有一句css是这样的:

1
2
3
4
.tags-group-icon-pair .tags-group-icon:nth-child(even) {
margin-top: 1rem;
transform: translate(-60px);
}

这块儿是为了实现,第二排与第一排有一个水平偏移量,以及上下间距。正常实现后是很好看的:

Heo页面的正常效果

查询发现,这是一个很有意思的css属性:

查阅发现 :nth-child() 定义:
选择器匹配作为其父元素的第 n个子元素的每个元素。:nth-child(n)
n可以是数字、关键字(奇数或偶数)或公式(如an + b)。

重点来了,父元素。而我这边渲染后的html结构是怎样的呢?

1
2
3
4
5
6
7
8
<div class="tags-group-icon-pair">
<a class="tags-group-icon" href="https://crazywong.com/" rel="noopener external nofollow" target="_blank" title="crazywong">
<img class="entered loading" data-ll-status="loaded" src="/img/loading22.gif" data-lazy-src="https://cdn.guole.fun/logo/Jerry.png" title="crazywong">
<div class="img-alt is-center">crazywong</div></a>
<a class="tags-group-icon" href="https://blog.zhheo.com/" rel="noopener external nofollow" target="_blank" title="张洪Heo">
<img class="entered loading" data-ll-status="loaded" src="/img/loading22.gif" data-lazy-src="https://cdn.guole.fun/logo/zhheo.png" title="张洪Heo">
<div class="img-alt is-center">张洪 Heo</div></a>
</div>

原因:

原来,多了个.img-alt.is-center。这样一来,.tags-group-icon:nth-child(even) 虽然匹配到了 .tags-group-icon 的父元素 .tags-group-icon-pair,但由于此时多了个.img-alt.is-center子元素,导致选择偶数项的时候,第二排的头像并非是父元素的第偶数项个元素。

解决方法:

  1. 由于我配置开启了 Butterfly 默认的 图片描述功能,主题的 addPhotoFigcaption() 方法会自动给图片添加 .img-alt.is-center 。查看主题源码发现,最简单就是非#article-container 节点,就不会添加。
  2. 于是,调整 flink.pug ,将首行的 #article-container 改成 #page,问题解决。
  3. 请注意,也需要一并调整 flink.styl 的首行,不然友链的默认样式没了。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**
* PhotoFigcaption
*/
function addPhotoFigcaption () {
document.querySelectorAll('#article-container img').forEach(function (item) {
const parentEle = item.parentNode
const altValue = item.title || item.alt
if (altValue && !parentEle.parentNode.classList.contains('justified-gallery')) {
const ele = document.createElement('div')
ele.className = 'img-alt is-center'
ele.textContent = altValue
parentEle.insertBefore(ele, item.nextSibling)
}
})
}
1
2
3
4
5
6
7
8
9
10
11
- #article-container
+ #page
.flink
- let pageContent = page.content
if page.flink_url
script.
(()=>{
const replaceSymbol = (str) => {
return str.replace(/[\p{P}\p{S}]/gu, "-")
}
……

添加 box-shadow 无效

原因:

  1. 其他box-shadow效果覆盖;
  2. 图层问题,试着添加z-index: 2000;验证下;
  3. 我遇到的,是由于 clip-path 属性导致不生效。如下,注释掉既可:
1
2
3
4
5
6
#category-bar {
border-radius: 8px;
border: var(--guole-border);
/* clip-path: inset(0 0 0 0 round 8px); */
}

transition 无效

原因:
transition 属性无法对一个从无到有的元素进行过渡显示。设置 display: none 导致过渡无效。

我在实现首页文章列表hover悬浮时,从底部向上浮现出文章摘要content时,对content设置了此属性:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
@media screen and (min-width: 768px) {
#recent-posts .recent-post-item > .recent-post-info > .recent-post-info-top > .content {
visibility: hidden;
-webkit-transition: 0.3s linear;
-moz-transition: 0.3s linear;
-o-transition: 0.3s linear;
-ms-transition: 0.3s linear;
transition: 0.2s linear;
margin-top: 20px;
line-height: 1.4;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
display: none;
}
#recent-posts .recent-post-item:hover .recent-post-info > .recent-post-info-top > .content {
visibility: visible;
-webkit-transition: 0.3s linear;
-moz-transition: 0.3s linear;
-o-transition: 0.3s linear;
-ms-transition: 0.3s linear;
transition: .3s linear;
line-height: 1.4;
margin-top: 12px;
opacity: 1;
-ms-filter: none;
filter: none;
display: -webkit-box;
}
}

解决方法:

查阅得知:
visibility:hidden的时候元素仍然存在于文档流中,同时opacity:0visibility:visibleopacity:1transition属性可以对在opacity0~1之间进行过渡。

因此使用visibility: visible;代替display: none既可:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
@media screen and (min-width: 768px) {
#recent-posts .recent-post-item > .recent-post-info > .recent-post-info-top > .content {
visibility: hidden;
-webkit-transition: 0.3s linear;
-moz-transition: 0.3s linear;
-o-transition: 0.3s linear;
-ms-transition: 0.3s linear;
transition: 0.2s linear;
margin-top: 20px;
line-height: 1.4;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
visibility: visible;
}
#recent-posts .recent-post-item:hover .recent-post-info > .recent-post-info-top > .content {
visibility: visible;
-webkit-transition: 0.3s linear;
-moz-transition: 0.3s linear;
-o-transition: 0.3s linear;
-ms-transition: 0.3s linear;
transition: .3s linear;
line-height: 1.4;
margin-top: 12px;
opacity: 1;
-ms-filter: none;
filter: none;
display: -webkit-box;
}
}