Hacktoberfest 2026：维护者为十月标记出来的 issue，仍然开放、适合新手。 浏览 Hacktoberfest issue

Chromium: excessive layout time with many math previews due to unused CSS anchor

已关闭 适合新手
  • 哪里不对？
#3,098 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 3 天内回复

还没有人认领这个 Issue。

评估

难度
2/5
预计耗时
1-3 小时
新手友好度
84/100
Issue 类型
缺陷
描述清晰度
描述清楚
活跃度
活跃
技术栈
react, typescript
领域
frontend, performance

调研方向

从 packages/core/src/editor/Block.css 开始，检查 .bn-preview-container 的 anchor-name 声明；issue 报告称不存在 anchor consumer，并且移除该声明即可消除 Chromium 的布局开销。复现提供的 500-inline-formula fixture，比较有无该声明时的 Chromium Performance 结果，并确认所有预览在可编辑模式和只读模式下都仍会渲染。

由索引模型根据 Issue 内容生成。

描述

What’s broken?

Rendering 500 official inline math previews in Chromium spends about 17.6 seconds in layout, including with editable={false}. Every .bn-preview-container receives anchor-name: --bn-source-popup-anchor in packages/core/src/editor/Block.css, although the current popup positioning does not consume this anchor.

Removing that declaration reduces layout to about 0.43 seconds with the same content and DOM.

What did you expect to happen?

Closed source previews should not incur CSS-anchor layout overhead when popup positioning does not use anchors.

Steps to reproduce
  1. In a React app with @blocknote/core, @blocknote/react, @blocknote/mantine, and @blocknote/math-block, render this component:
import { BlockNoteSchema, defaultBlockSpecs, defaultInlineContentSpecs } from "@blocknote/core";
import { useCreateBlockNote } from "@blocknote/react";
import { BlockNoteView } from "@blocknote/mantine";
import { createReactInlineMathSpec } from "@blocknote/math-block";
import "@blocknote/mantine/style.css";

const schema = BlockNoteSchema.create({
  blockSpecs: defaultBlockSpecs,
  inlineContentSpecs: {
    ...defaultInlineContentSpecs,
    math: createReactInlineMathSpec(),
  },
});
const initialContent = Array.from({ length: 25 }, (_, row) => ({
  type: "paragraph",
  content: Array.from({ length: 20 }, (_, col) => [
    { type: "text", text: " text ", styles: {} },
    { type: "math", content: `x_{${row * 20 + col}}^2 + y^2 = z^2` },
  ]).flat(),
}));

export default function App() {
  const editor = useCreateBlockNote({ schema, initialContent });
  return <BlockNoteView editor={editor} editable={false}
    formattingToolbar={false} sideMenu={false} slashMenu={false} />;
}
  1. Serve a production build and record page load in Chromium's Performance panel.
  2. Add .bn-preview-container { anchor-name: none !important; } as a diagnostic override and reload. Layout time drops substantially; all 500 formulas remain rendered.
  3. Repeat with editable={true}; the same issue occurs.
BlockNote version

Reproduced on 0.54.0 and current source at 835fabf86ef26c9932075ab47f3d03cf900f276b.

Environment

Chromium 151.0.7922.137, Linux, AMD Ryzen 7 5800X. Production React/Vite fixture, 1280×900 viewport, no CPU throttling.

Additional context

Current-source production builds, three runs per cell; median cumulative CDP LayoutDuration through editor/font readiness:

500 inline formulas Original Declaration removed
Editable 17.610 s 0.437 s
Read-only 17.684 s 0.427 s

Median readiness improves from 18.51 to 1.28 seconds in editable mode. The same trigger also reproduces with official block math. No position-anchor, anchor(), or anchor-size() consumer exists in the inspected source; popups currently use absolute positioning.

Contribution
  • I'd be interested in contributing a fix for this issue
主要语言
TypeScript
星标
10.2k
派生
778
平均合并
5 天 17 小时
30 天内合并 PR
30

环境准备

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

TypeCellOS/BlockNote 的其他 Issue

查看 TypeCellOS/BlockNote 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。