疑难杂症

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)