UI/Editor sync issue causes typed code to misalign and display incorrectly (Safari only)

[jia1022]

Describe the bug
While typing code in the CodeTrial editor, the display becomes out of sync with my input specifically when using Safari. The text I type does not duplicate, but it becomes severely misaligned on the screen. The cursor position and the actual text rendered in the editor do not match, causing formatting, indentation, and visual placement of the characters to break.

I have tested this on Chrome, and the editor works perfectly fine without any issues. The visual displacement bug seems to be isolated to Safari.

Steps to reproduce

1. Open a coding session in CodeTrial using Safari.
2. Start typing standard C/C++ code.
3. Observe the editor's behavior while typing.
4. The text becomes misaligned, appearing on incorrect lines or positions, and causes the surrounding text layout to become visually corrupted.
5. Repeat the same steps in Chrome, and the issue does not occur.

Actual result
In Safari, the code typed is visually displaced and displayed incorrectly. The visual layout breaks, and characters or lines are pushed to incorrect positions, even though there is no unintended duplication of text.

Expected result
The editor should align and display the typed code correctly in real-time on Safari, perfectly syncing the cursor and text just as it does on Chrome.

Environment

• OS: macOS 27
• Browser causing the issue: Safari 27.0

[ColtenOuO]

Could you please test this with the latest version of codetrial and record a video to reproduce it? That would make it much easier to pinpoint the issue.

I tried reproducing the problem on Safari earlier, but I wasn't able to replicate it.

[jia1022]

Thanks for looking into this! I've tested it with the latest version of codetrial, and the issue is still present on my end.
I've attached a screen recording. Hope this helps pinpoint the issue.

UI.Editor.sync.issue.mov

[jserv]

#155 reports the same symptom from the cursor's side and has been closed as a duplicate of this issue. Two details from it are worth having here, since they differ from what is described above:

After starting a new interview session, the IDE worked normally again

Frequency: Has only occurred once so far

Environment there was macOS 27.0 with Safari 27.0 (22625.1.29.11.27), 100% zoom, no extensions, and no recording was captured. That reporter did not test Chrome, so this issue remains the only evidence that Chrome is unaffected.

So the open question is whether this is persistent while typing, as described here, or transient and cleared by a new session, as seen there. If the recording above shows it starting mid-session rather than from the first keystroke, that would be useful to note.

[jserv]

Open PR #204 makes the highlight overlay inherit the editor font, and its author reproduced this drift on Safari 27.0 from the first line typed. @jia1022, please test that branch, or run document.querySelector("#editor-highlight code").style.font = "inherit" in the console during a session, and say there whether the drift goes away. The PR only refers to this issue, so it will be closed by hand after the merge.

[jia1022]

I ran the code in the console during my session, and the drift issue is completely gone. Thanks for the fix!