PC 踩坑记录

记录个人遇到或他人分享的 PC 相关踩坑记录

transform 导致字体不清晰

transform 在渲染非整数的 px 时就会出现字体模糊

解决方法：

/* 方案一 */
目标元素 {
  -webkit-font-smoothing: antialiased;
}

/* 方案二 */
目标元素 {
  transform: perspective(1px);
}

详细说明 CSS-TRACKS

删除 PWA 服务后，浏览器无法更新到最新页面

本站之前使用了 PWA，在切换到 vitepress 后移除了 PWA 服务，在部署后浏览器仍然访问的是 vuepress 版本的

解决方法：

/* 注销 PWA 服务 */
if (window.navigator && navigator.serviceWorker) {
  navigator.serviceWorker.getRegistrations().then(function (registrations) {
    for (let registration of registrations) {
      registration.unregister()
    }
  })
}

/* 删除浏览器中的缓存 */
if ('caches' in window) {
  caches.keys().then(function (keyList) {
    return Promise.all(
      keyList.map(function (key) {
        return caches.delete(key)
      }),
    )
  })
}