Safari input lag with focusable elements inside block replacement widgets

v6
1

In Safari 17.6, typing before CodeMirror block replacement widgets becomes noticeably slow when the widgets contain native focusable elements such as .

Minimal reproduction: create 2–3 Decoration.replace({block: true, widget}) decorations. If each widget contains a static header and a <pre>, editing remains smooth. Adding two <button> elements to each widget causes noticeable input lag when pressing Enter near the start of the document. Removing the buttons immediately resolves it. The same demo remains smooth in Chrome.

This reproduces with both CodeMirror drawSelection() and the native Safari selection, and without ResizeObserver, estimatedHeight, or manual requestMeasure() calls. It appears to be a Safari/WebKit interaction between contenteditable, block widgets, and focusable descendants.

2

Since you specifically mention an older Safari, does that mean the issue doesn’t occur in never versions?

3

I don’t know, because I only have an old browser, and I found this issue in the old browser. I’m running macOS 14.8.3 (build 23J220).

4

I can’t reproduce this with this widget. Would be useful if you can condense what you’re doing down to a minimal script.