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