Scrollbar position jumps when selecting closing bracket on mobile

[MannoSutisnaDev]

Describe the issue

When I place a code mirror text editor on my page completely at the top, there is no problem when it comes to the scrollbar position jumping.

no-problem.mp4

However when I give element that code mirror is attached to a any margin-top, the scrollbar position jumps somewhere above when selecting the last closing bracket of the code inside the code mirror element.

issue-20px.mp4

In the example above the code mirror element was given a margin-top of 20px. Below there is another example where the code mirror element was given a margin-top of 100px.

issue-100px.mp4

In the video examples that I gave I was running code mirror in a Vue application and the exact code that I used is as follows:

<script lang="ts" setup>
import { EditorState } from "@codemirror/state";
import { EditorView } from "@codemirror/view";
import { basicSetup } from "codemirror";
import { oneDark } from "@codemirror/theme-one-dark";

const editorRef = ref<HTMLDivElement>();
onMounted(() => {
  const editorElement = editorRef.value;
  if (!editorElement) {
    return;
  }
  const state = EditorState.create({
    extensions: [basicSetup, oneDark],
    doc: JSON.stringify(
      {
        compilerOptions: {
          target: "ESNext",
          useDefineForClassFields: true,
          module: "ESNext",
          moduleResolution: "Node",
          strict: false,
          jsx: "preserve",
          resolveJsonModule: true,
          isolatedModules: true,
          esModuleInterop: true,
          lib: ["ESNext", "DOM"],
          skipLibCheck: true,
          noEmit: true,
        },
        include: [
          "src/**/*.ts",
          "src/**/*.d.ts",
          "src/**/*.tsx",
          "src/**/*.vue",
        ],
        references: [{ path: "./tsconfig.node.json" }],
      },
      null,
      2,
    ),
  });
  new EditorView({
    parent: editorElement,
    state,
  });
});
</script>

Browser and platform

Samsung S22 Ultra, Android 14, Chrome 131.0.06778.200

Reproduction link

No response

[marijnh]

I can reproduce this. It only happens with bracket matching enabled. The scroll position jump seems to happen a little after CodeMirror finishes updating the DOM (not even in the same frame). This suggests the browser is doing something on its own timeline, though I'm not sure what. I'd guess the browser somehow decides it needs to scroll the DOM change caused by highlighting the bracket at the start into view, but since it doesn't generally do this for all changes (for example the removing of the highlighting doesn't cause a similar issue) I suppose there's more going on.

[marijnh]

Looking into this some more, I'm rather certain it's a bug in Chrome (none of the CodeMirror code is initiating a scroll, and the way the resulting scroll position depends on the margin makes no sense). I wasn't able to set up a self-contained script that reproduces it though, so I don't really have a way to report it to the Chrome team.

[MannoSutisnaDev]

@marijnh is there a way to disable bracket matching?

[marijnh]

Yes—don't include the matchBrackets extension.

[peasneovoyager2banana2]

Chrome

Recording.at.October11-123357pm.2.mp4

Firefox

Recording.at.October11-010344pm.5.mp4