Safari/Chrome Desktop: Caret movement with up/down arrow keys breaks when DOM is constructed programmatically

[michael]

When the following markup is constructed programmatically...

<div class="editable" contenteditable="true">
	<h3 class="centered field empty" placeholder="Hello"></h3>
	<!---->
	<h3 class="centered field empty" placeholder="Hello"></h3>
	<!---->
	<h3 class="centered field empty" placeholder="Hello"></h3>
	<!---->
	<h3 class="centered field empty" placeholder="Hello"></h3>
	<!---->
</div>

with this code...

function create_text(value = "") {
	return document.createTextNode(value);
}
function comment() {
	var frag = document.createDocumentFragment();
	var start = document.createComment("");
	var anchor = create_text();
	frag.append(start, anchor);
	return frag;
}
function first_child(fragment) {
	return Object.getOwnPropertyDescriptor(
		Node.prototype,
		"firstChild",
	)?.get?.call(fragment);
}
function element(node, tag, render) {
	const el = document.createElement(tag);
	el.append(create_text());
	render(el);
	node.before(el);
}
function render(root) {
	for (let i = 0; i < 4; i++) {
		const f = comment();
		const n = first_child(f);
		element(n, "h3", (el) => {
			el.className = "centered field empty";
			el.setAttribute("placeholder", "Hello");
		});
		root.append(f);
	}
}
render(document.getElementById("root"));

... caret movement breaks.

See Repro: https://w3c.github.io/editing/repros/512.html

Also see this issue in Svelte for context: sveltejs/svelte#17164

[johanneswilm]

@michael I can confirm that in Chromium, the caret can only go into the top and bottom <h3> when created programmatically. In Firefox it looks like both cases break.

[michael]

Yes, that's the behavior I see too, in both Safari and Chrome (Firefox breaks generally when there's no additional br element). So if this a browser bug, it likely got introduced in pre-Blink times.

What is so weird here is that there are some ways (declarative or programmatic) that lead to one behavior, and other ways (programmatic) that lead to the other behavior, even though the DOM structure is exactly the same. But there must be something else in the state of the document that causes the difference in behavior.