Visual glitches while editing an image using CKBox

[oleq]

📝 Provide detailed reproduction steps (if any)

Screen.Recording.2024-04-03.at.11.27.56.mov

✔️ Expected result

1. The loading spinner in CKBox staying centered.
2. The image toolbar staying attached to the image after closing CKBox.

📃 Other details

• Browser: Chrome
• OS: MacOS

---

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

[gorzelinski]

I've investigated these problems a little.

1. The spinner is probably only related to this one particular example. I guess there is a CSS conflict of some sort.
2. The problem with the toolbar might be more broad. I tested some other demos with CKBox image editing enabled, and the results were the same. It may be related to the position: fixed property. When you turn it off on the CKBox dialog, the toolbar works correctly. It also fixes itself after some action on the page, like scrolling or clicking it. The toolbar is misplaced for 100px from the top.

Examples of other demos with the second problem:

• https://ckeditor.com/docs/ckeditor5/latest/features/images/images-overview.html
• https://ckeditor.com/docs/ckeditor5/latest/features/file-management/ckbox.html
• https://ckeditor.com/docs/ckeditor5/latest/features/show-blocks.html

[oleq]

2. The problem with the toolbar might be more broad. I tested some other demos with CKBox image editing enabled, and the results were the same. It may be related to the position: fixed property. When you turn it off on the CKBox dialog, the toolbar works correctly. It also fixes itself after some action on the page, like scrolling or clicking it. The toolbar is misplaced for 100px from the top.

We may want to call editor.ui.update() when CKBox closes. Various parts of the editor UI (including BalloonToolbar) react to that and re-position themselves.