前端踩坑笔记 | Guo Le's Blog

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

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

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

原因：

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

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是这样的：

.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结构是怎样的呢？

<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子元素，导致选择偶数项的时候，第二排的头像并非是父元素的第偶数项个元素。

解决方法：

由于我配置开启了 Butterfly 默认的 图片描述功能，主题的 addPhotoFigcaption() 方法会自动给图片添加 .img-alt.is-center 。查看主题源码发现，最简单就是非#article-container 节点，就不会添加。
于是，调整 flink.pug ，将首行的 #article-container 改成 #page，问题解决。
请注意，也需要一并调整 flink.styl 的首行，不然友链的默认样式没了。

/**
 * 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)
    }
  })
}

- #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 无效

原因：

其他box-shadow效果覆盖；
图层问题，试着添加z-index: 2000;验证下；
我遇到的，是由于 clip-path 属性导致不生效。如下，注释掉既可：

#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设置了此属性：

@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:0；visibility:visible时opacity:1，transition属性可以对在opacity0～1之间进行过渡。

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

@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;
  }
}