疑难杂症

Published by powerfulyang on Oct 11, 2022

Image, decoding: async, loading: lazy

用 framer-motion 写一个懒加载图片组件，Safari 上图片从一张模糊的图替换到高清图的过程。

  • decoding="async" 会导致图片闪烁。
  • loading="lazy" 会导致高清图不显示。

关于这个问题的重新阐述

js
1const img = new Image();
2img.loading = 'lazy';
3img.onload = () => {
4  // onload 不会执行
5};
6img.src = src;
html
1<!-- 如果 src 的值变化，图片会闪烁 -->
2<img decoding="async" src="" />

企业微信登陆不成功

用户企微静态登陆不成功，其他人在他的电脑上登陆无异常，他在其他人电脑登陆无异常。
仅自己在自己电脑登陆突然不正常，以前也正常，那猜肯定是硬件问题。
答案：C盘今天满过，IT 帮忙清理过，导致现在异常

Vary: Origin 导致的跨域问题

详见浏览器缓存缓存了跨域头导致访问字体等文件异常

时区老大难问题

~~SSR hydrate 时 Server 和 Client 时区不同，时间显示会抛出异常，解决办法最好是把客户端时区放到 http header 里面。

white-space: pre 和 innerHtml 一起使用导致问题

带有 white-sapce: pre 属性的标签，平时由于压缩工具帮忙去掉了空格和换行使我们忽略的问题，但是当使用 innerHtml 的时候换行、空格会生效，且 devtools 没有 padding and margin 但是高度就是异常的，让人摸不着头脑。

codepen
1<iframe height="300" style="width: 100%;" scrolling="no" title="white-sapce:pre and innerHtml cause the issue" src="https://codepen.io/powerfulyang/embed/LYmqpdO?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
2  See the Pen <a href="https://codepen.io/powerfulyang/pen/LYmqpdO">
3  white-sapce:pre and innerHtml cause the issue</a> by powerfulyang (<a href="https://codepen.io/powerfulyang">@powerfulyang</a>)
4  on <a href="https://codepen.io">CodePen</a>.
5</iframe>

scrollIntoView 的 BUG

scrollIntoView on container which has overflow

cause abnormal scroll.

codepen
1demo: click on body, see the bug.
2<iframe height="300" style="width: 100%;" scrolling="no" title="scrollIntoView  with `overflow: hidden` cause  abnormal scroll" src="https://codepen.io/powerfulyang/embed/GRdedaK?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
3  See the Pen <a href="https://codepen.io/powerfulyang/pen/GRdedaK">
4  scrollIntoView  with `overflow: hidden` cause  abnormal scroll</a> by powerfulyang (<a href="https://codepen.io/powerfulyang">@powerfulyang</a>)
5  on <a href="https://codepen.io">CodePen</a>.
6</iframe>

带锚点的链接初始化时，也会出现这种问题。
不考虑兼容性的解决方案，overflow: clip 是最佳解决方案。

判断滚动到底部时会出现的问题

在特定屏幕分辨率加缩放的情况下，scollTop 和 clientHeight 出现小数，导致总和可能与 scrollHeight 差零点几。

js
1// 最好使用如下代码兼容下
2Math.ceil(this.scrollTop) + Math.ceil(this.clientHeight) >= Math.floor(this.scrollHeight)