Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Visual glitches while editing an image using CKBox #16153

Closed
oleq opened this issue Apr 3, 2024 · 2 comments 路 Fixed by #16348
Closed

Visual glitches while editing an image using CKBox #16153

oleq opened this issue Apr 3, 2024 · 2 comments 路 Fixed by #16348
Labels
package:ckbox package:image type:bug This issue reports a buggy (incorrect) behavior.
Milestone
iteration 75

Comments

@oleq
Copy link
Member

oleq commented Apr 3, 2024

馃摑 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.
@oleq oleq added type:bug This issue reports a buggy (incorrect) behavior. release:potential-blocker This issue potentially blocks the upcoming release (should be checked). package:image type:regression This issue reports a bug that was not present in the previous releases. package:ckbox labels Apr 3, 2024
@DawidKossowski DawidKossowski removed the type:regression This issue reports a bug that was not present in the previous releases. label Apr 3, 2024
@pomek pomek removed the release:potential-blocker This issue potentially blocks the upcoming release (should be checked). label Apr 4, 2024
@gorzelinski gorzelinski reopened this Apr 5, 2024
@gorzelinski
Copy link
Contributor

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:

@oleq
Copy link
Member Author

oleq commented May 7, 2024

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.

This was referenced May 14, 2024
Merged
Closed
niegowski added a commit that referenced this issue May 22, 2024
@niegowski
Merge pull request #16348 from ckeditor/ck/16153
3790aa2 
Fix (ckbox): The image toolbar stays attached to the image after closing CKBox. Closes #16153.
@CKEditorBot CKEditorBot added this to the iteration 75 milestone May 22, 2024
@CKEditorBot CKEditorBot mentioned this issue May 23, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
package:ckbox package:image type:bug This issue reports a buggy (incorrect) behavior.
Projects
None yet
Milestone
iteration 75
Development

Successfully merging a pull request may close this issue.

Update ui on close image ckbox dialog. ckeditor/ckeditor5
5 participants
@oleq @pomek @DawidKossowski @CKEditorBot @gorzelinski