疑难杂症

Published by powerfulyang on Oct 11, 2022

Image, decoding: async, loading: lazy

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

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

企业微信登陆不成功

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

Vary: Origin 导致的跨域问题

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

时区老大难问题

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

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

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

scrollIntoView 的 BUG

scrollIntoView on container which has overflow:hidden cause abnormal scroll.

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

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

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

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