Font styles get lost while typing in Safari

[jimf]

📝 Provide detailed reproduction steps (if any)

Use the CKEditor Online Builder to create a minimal editor:

1. Visit https://ckeditor.com/ckeditor-5/online-builder/
2. Select Classic (editor doesn't seem important; was able to reproduce using Balloon Block as well)
3. Remove all plugins; add Font Family (optionally, other Font plugins as well)
4. Continue through remaining steps, download custom build, and open sample/index.html

Then to reproduce the issue (Safari only?):

1. Select a block of text (e.g., the "Another ground-breaking experiment..." paragraph text)
2. Change the Font Family to something visually different (e.g., "Courier New")
3. Move the cursor to the end of the selection and just start typing
4. New text will initially be entered with the expected style, but typically after typing just a few words, the font-family style gets dropped from the surrounding DOM span tag (this part is finicky; unsure if there's a timing aspect as well)

Video attached.

https://user-images.githubusercontent.com/413269/188706436-10e7a58c-55f3-4195-8c6b-e1c014a77c13.mov

Additional:

• Font Family was an example, but I've been able to reproduce this issue with size, color, and background-color as well
• Using the CKEditor 5 devtools, the model and view both have the the correct state. It seems the dom is out of sync. The span tag exists, but it's missing the expected style attribute.

✔️ Expected result

Font styles are retained as the user types.

❌ Actual result

Visually, the styles appear to get unset as the user types.

📃 Other details

• Browser: Safari 15.16.1
• OS: macOS Monterey 12.5.1
• First affected CKEditor version: Unsure. Reproduced in 35.0.1, 35.1.0
• Installed CKEditor plugins: Font, Essentials

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[jimf]

I've been banging on this for the last few hours, and I found that the environment I provided in the reproduction steps isn't very helpful when it comes to tracing the JS. It's much better to run in a Webpack environment, where one can get to a helpful stack trace with the following steps:

1. Apply the font-family style as described above
2. Right-click the text and inspect the <p> element
3. Right-click the <p> element in the devtools and select "Break on > Subtree Modified"
4. Reproduce the issue and the devtools should hopefully bounce into a debugger highlighting the remove call that is causing this issue, as well as the long stack trace leading up to it

I'm still trying to make sense of what's going on, but two observations:

1. This appears to be the result of an input event getting resolved into an InputCommand and propagated around as an eventual render call
2. When following the above "break on subtree modified" steps in Chrome, I observed that the debugger is never triggered, suggesting to me that the scenario isn't being triggered at all, as opposed to being triggered and handled differently/correctly.

[FilipTokarski]

Thank you for the detailed report and a screencast. I followed the steps you described but was not able to reproduce it. Tried on macOS Monterey 12.2 with Safari 15.3. After changing the font family and typing, it always stays the same for me.

@ckeditor/qa-team Is anyone able to reproduce this?

[Acrophost]

@FilipTokarski I managed to reproduce it. It might have something to do with Safari's autocorrect, since every time the style disappears it also changes the last word that was typed in. Tested on macOS Monterey 12.5.1 /w Safari 15.6.1

https://user-images.githubusercontent.com/66953380/188849577-3992cac4-67ac-4c5f-b659-f7f77de613ee.mov

[FilipTokarski]

Thanks! Do you know since which editor version it happens?

[Reinmar]

Is this bug reproducible on ckeditor/ckeditor5#11456?

[Acrophost]

@Reinmar from what I see the bug is no longer present in https://github.com/ckeditor/ckeditor5/pull/11456 - at least I wasn't able to reproduce it.

[jimf]

It might have something to do with Safari's autocorrect, since every time the style disappears it also changes the last word that was typed in.

I'm not sure if this is the same thing, but when I go to Edit > Spelling and Grammar and uncheck all the auto-correct options, I am still able to reproduce.

Is this bug reproducible on https://github.com/ckeditor/ckeditor5/pull/11456?

+1 @Acrophost's findings. Using the font-family manual test, I was able to reproduce the issue on master, but not on ck/epic/11438-migrate-to-beforeinput.

[jimf]

What are next steps? I'm guessing the #11456 epic is still a ways off? Is there a rough ETA on it? In the meantime, are there any suggestions on a possible workaround I might be able to employ until beforeinput is shipped?

[Reinmar]

@jimf The actual branch in this PR is production-ready except support for Android. Android is in ckeditor/ckeditor5#12446 and it's pretty much ready too. We're completing tests and polishing last significant bugs. But we are not giving ETA because "polishing last significant bugs" is in this case really a journey in the dark.

[jimf]

👍 I get it. Thank you for the response.