This repository was archived by the owner on Apr 15, 2026. It is now read-only.
Repository navigation
This repository was archived by the owner on Apr 15, 2026. It is now read-only.
Scrollbar position jumps when selecting closing bracket on mobile #1499
Description
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
Activity
marijnh commentedon Jan 6, 2025
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 commentedon Jan 7, 2025
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 commentedon Jan 7, 2025
@marijnh is there a way to disable bracket matching?
marijnh commentedon Jan 7, 2025
Yes—don't include the
matchBracketsextension.peasneovoyager2banana2 commentedon Oct 11, 2025
Chrome
Recording.at.October11-123357pm.2.mp4
Firefox
Recording.at.October11-010344pm.5.mp4
marijnh commentedon Apr 15, 2026
This issue has been moved to issue #1499 on the repository's new home.