Tinymce-floatpanels can be in odd positions if editor is scrolled.

[programmin]

Steps to see the problem -

Open the text-color picker (or the paragraph picker, any mce-panel pop-out) and press the scrollwheel down.

When the toolbar turns to fixed-position, the mce-panel is above where it should be.

Conversely if you are scrolled down the page, open the font-color-picker, and press the scrollwheel-up, you'll have the color-picker below, looking like it's part of the page.

[iseulde]

We know about this. Same for tooltips. There was a reason we didn't fix this, but I can't remember. @azaozz?

[iseulde]

Reason: If the panel is larger than the screen, there's no way to reach the end. This is probably easy to fix if we make the inside scrollable.

[iseulde]

Not sure how to fix this... Either the panels need to be made responsive by TinyMCE (have a scrollbar for the panel if it doesn't fit) and then hide the panels on window scroll. The problem then is that it would hide once you hit the end of the panel... That could be "fixed" by checking whether or not the mouse is above the panel, but that's not ideal since the mouse could at the edge.

Another approach that would make it a bit better is to just check if the mouse is above the panel without the second scroll. So, hide all the panels on scroll, except when the mouse is above it.

Not sure how this would work on touch devices. It's disabled on mobile, but there are other devices that have a touch screen.

A third approach is to check if the visible panel overflows the window...

In any case, I don't see why we shouldn't hide the tooltips.

[azaozz]

Replying to avryl:

Another approach that would make it a bit better is to just check if the mouse is above the panel without the second scroll. So, hide all the panels on scroll, except when the mouse is above it.

That would still miss one of the most common cases when we need to keep the panels:

• User opens a drop-down that exceeds the viewport height.
• User attempts to scroll the window by dragging the vertical scrollbar with the mouse.

Not sure how this would work on touch devices.

It won't :)

A third approach is to check if the visible panel overflows the window...

We should probably do this. We have the viewport height already, getting the panel's height would be trivial (will need to loop through all open panels).

Also, this only needs to run once on scroll, when the user starts scrolling. Even debounce() for 0.5 sec is too much and the delay is noticeable. We should run it once on scroll, then set a flag and remove it with a long delay, perhaps 1-2 sec.

[azaozz]

In 29738:

Editor expand: hide TinyMCE float panels and tooltips when scrolling, props avryl, fixes #29516 for trunk.

[azaozz]

Reopen for 4.0.1.

[azaozz]

Tested this more and the current patch seems good enough (just needed small adjustments). The panels aren't hidden when the cursor is over them which makes it possible to scroll and keep them visible.

[jeremyfelt]

Screen capture - ​https://cloudup.com/crBJbMZ6TUv

• If I open the paragraph or text color panel, move the mouse away from the panel, and then scroll - the panel goes away as expected. This is the behavior fixed by the patch.
• If I open either panel and start scrolling with the mouse over the panel - the panel sticks to the content and does not disappear. This is the same behavior as 4.0 and has not changed with the patch. Per @azaozz, this could be okay for now.

If we're good with this in 4.1, then it's ready to merge with the 4.0 branch as well.

29516.diff is [29738] applied to 4.0.

[jeremyfelt]

[29738] is good to merge with 4.0, with the same caveat from the last comment.

[nacin]

I'm merging [29738] but leaving this open. Can someone spin the remaining issue off to a new ticket, then close this?

[nacin]

In 30256:

Editor expand: hide TinyMCE float panels and tooltips when scrolling.

Merges [29738] to the 4.0 branch.

props avryl.
see #29516.