StickyPanel behaves weird inside overflowed element

[oskarwrobel]

StickyPanel should listen to scroll event of all of its ancestors not only on the window object.
The same as BalloonPanelView does: https://github.com/ckeditor/ckeditor5-ui/blob/beb9f96615da05f22166fb8ddfa7838333b1b61f/src/panel/balloon/balloonpanelview.js#L326-L340 (we can consider moving this listener from BPV to some util).

Besides panel should take only the visible part of the limiter rect into consideration.

Now when classic editor is inside overflowed container then sticky top bar behaves weird.

[ma2ciek]

Duplicate in the SO question: https://stackoverflow.com/questions/52512665/how-to-disable-sticky-toolbar-in-classic-editor-when-page-is-scrolled.

[gauravjain028]

@oleq Is it possible to fix by overriding something in my build ?

[petrvorobev]

confirmed

[akhilxavierm]

This CSS would fix the issue
.ck .ck-sticky-panel .ck-sticky-panel__content_sticky{ position: static !important; }

[flyher]

This CSS would fix the issue
.ck .ck-sticky-panel .ck-sticky-panel__content_sticky{ position: static !important; }

Thanks @akhilxavierm , this works well.
Maybe we can add the following css to solved the issue temporary.

// default global
.ck .ck-sticky-panel .ck-sticky-panel__content_sticky {
    position: static !important;
}

// blur
.ck-editor__top {
      height: 1px;
      overflow: hidden;
}

// focus
.ck-editor__top {
      display: block;
      height: 38.67px;
      .ck-sticky-panel__placeholder {
        display: none !important;
      }
}

[robclancy]

We come up with issues, not sure if related to this or the many other issues I have read, where it just doesn't work properly if you don't use the overflow on the body element.

But just using CSS sticky on the classic and document editors seems to have worked fine.

I disabled the sticky panel by doing:

editor.ui.view.stickyPanel.unbind('isActive');
editor.ui.view.stickyPanel.isActive = false;

And added the following CSS (tailwind but self explanatory):

.ck-editor__top {
  @apply sticky top-0 z-10 !important;
}

.ck-sticky-panel__content {
  @apply static !important;
}

[michalbilik]

This issue is still reproducible on the master branch.

Steps:
1. In the all-features.html manual test, add the following style:

.container {
width: 500px;
height: 700px;
border: 1px solid #ccc;
overflow: auto;
}

2. Wrap the <div id="editor"> with a <div class="container">

3. Run the test with yarn manual --files=ckeditor5

4. Scroll inside the editor 

5. Click outside of the editor and then click back inside the editor. The toolbar will appear at the top above the buttons and won't follow the scroll.

This issue occurs in both Firefox and Safari.

Screen.Recording.2023-06-26.at.10.41.45.mov

[Dumluregn]

The initial scope is timeboxed discovery for 2 solutions:

1. Fix in sticky toolbar itself
2. Merge with the balloon system*

• If we go with this solution, once toolbar becomes sticky, the balloon will need to be repositioned after each 1px viewport change, so it may be costly. It's also debounced, so it may look weird.

Option 1 sounds like a cheaper and UX-safer one.

[oleq]

For anyone interested, the long–awaited fix for this issue will land in the upcoming release of CKEditor 5 🙂