Font loading causes Cumulative Layout Shift (CLS)
还没有人认领这个 Issue。
评估
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 新手友好度
- 38/100
- Issue 类型
- 缺陷
- 描述清晰度
- 需要澄清
- 活跃度
- 停滞
调研方向
先在 PageSpeed Insights 中打开 /kratos/bring-your-own-ui/custom-ui-advanced-integration URL，然后在 Chrome DevTools 的 Performance 标签页中检查报告的布局偏移原因。当自定义字体加载不再导致报告中的可见文本回流，且页面的 CLS 得到改善时，即表示完成。
由索引模型根据 Issue 内容生成。
描述
Preflight checklist
- I could not find a solution in the existing issues, docs, nor discussions.
- I agree to follow this project's Code of Conduct.
- I have read and am following this repository's Contribution Guidelines.
- I have joined the Ory Community Slack.
- I am signed up to the Ory Security Patch Newsletter.
Ory Network Project
No response
Describe the bug
The docs site experiences layout shift when custom fonts load because the fallback fonts (sans-serif, monospace) have different metrics than our web fonts (Inter, JetBrains Mono). This causes visible "jank" as text reflows when fonts swap in.
This seems to negatively impact Core Web Vitals CLS score.
Reproducing the bug
PageSpeed Insights
- Go to PageSpeed Insights - /kratos/bring-your-own-ui/custom-ui-advanced-integration
- Enter the docs URL
- Click on Desktop tab
- Scroll down and click Layout shift culprits to expand
Chrome DevTools Performance Tab
Relevant log output
Relevant configuration
Version
1.0.0
On which operating system are you observing this issue?
None
In which environment are you deploying?
None
Additional Context
No response
- 主要语言
- TypeScript
- 星标
- 161
- 派生
- 1.9k
- PR 合并指标
- 30 天内没有已合并 PR
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
ory/docs 的其他 Issue
-
bug
难度 2/5 1-3 小时 新手友好度 78/100
-
upstream reference closed: github.com/w3c/webauthn/issues/1372可能重新可做 @Faisal-9999 于 53 天前认领，目前没有进行中的 PR。 未关闭good first issue help wanted upstream
难度 1/5 1-3 小时 新手友好度 72/100
-
bug
难度 1/5 1 小时以内 新手友好度 78/100
-
good first issue help wanted upstream
难度 1/5 1-3 小时 新手友好度 72/100
-
Shared kratos pages can only belong to one sidebar — OEL readers lose navigation context可能重新可做 @hperl 于 105 天前认领，目前没有进行中的 PR。 未关闭
相似的 Issue
-
bug require-triage
难度 2/5 1-3 小时 新手友好度 72/100
expressjs/expressjs.com#2549 · 1 个 reaction ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 83/100
umami-software/umami#4686 · 1 条评论 ·
维护者通常 2 天内回复
-
[Bug]: Device screenshot fails with 500 on iPhone Duo (Xcode 27.2): serve-sim calls simctl without --display可能已有人在做 关联的 PR 仍在进行中或已合并。 未关闭
难度 2/5 1-3 小时 新手友好度 66/100
pingdotgg/t3code#24900 · 1 条评论 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 76/100
inu-appcenter/UNIDorm-web#411 ·
维护者通常 1 天内回复
-
🐛 bug
难度 2/5 1-3 小时 新手友好度 82/100
维护者通常 2 天内回复