TypeCellOS / TypeCellOS/BlockNote

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

Open Beginner friendly
#3,098 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
10.2k
Forks
772
Avg merge
3d 11h
Merged PRs (30d)
17

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in packages/core/src/editor/Block.css and inspect the .bn-preview-container anchor-name declaration; the issue reports that no anchor consumer exists and that removing it eliminates the Chromium layout cost. Reproduce the provided 500-inline-formula fixture, compare Chromium Performance results with and without the declaration, and confirm all previews remain rendered in both editable and read-only modes.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend, performance
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Active
Clarity
Clearly specified
Newbie friendliness
84/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.