疑难杂症

Image, decoding: async, loading: lazy

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

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

企业微信登陆不成功

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

Vary: Origin 导致的跨域问题

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

时区老大难问题

SSR hydrate 导致的 Server 和 Client 不同,抑或数据库时区导致的问题。用客户端 format 去解决

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

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



scrollIntoView 的 BUG

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

demo: click on body, see the bug.

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

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

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

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