WordPress.org

Make WordPress Core

Opened 4 weeks ago

Last modified 4 weeks ago

#44431 new defect (bug)

Post editor toolbar: inconsistent and bugged sticky behaviour, and; incorrect paragraph styles menu positioning on scroll

Reported by: startsat60 Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 4.9.6
Component: Administration Keywords: has-screenshots reporter-feedback
Focuses: ui, javascript, administration Cc:

Description

The MCE editor toolbar exhibits inconsistent and incorrect sticky behaviour on scroll. There are three patterns I've observed:

1) If you wait for more than a few seconds before scrolling, the editor toolbar will not stick, and you'll need to scroll up to make any changes on medium-long posts.

2) If you scroll within approximately 1 sec of the toolbar appearing, it will stick to the top of the window, and will never unstick, causing it to cover the Title field, preventing it from being edited, and also when scrolling down past the main content textarea, it will remain stuck and will overlap subsequent fields as well.

3) In the "goldilocks zone" between the above time periods, it's possible to have the toolbar stick when scrolling, then unstick, and it will remain in the location where it became unstuck, usually in the middle of the main content textarea.

Initial page load No image "etNrM5q" attached to Ticket #44431


Along a similar vein, the paragraph style menu positioning is also incorrectly implemented. It appears that the logic to determine its position is:

1) Take the Y page offset for the paragraph style menu button

2) Apply this offset to the fixed menu as its top style property

This is only legitimate when the user does not scroll. As soon as the user scrolls, whether the toolbar sticks or not, the page offset of the menu button applied as the top offset of the menu will cause the menu to appear entirely disconnected from the button.

If the toolbar is not stuck, then the menu will always at least still be visible, because it's not possible to click the menu button once it has been scrolled out of view, and its page offset will be small enough that the menu will still appear within the window.

However, if the toolbar is not initially visible before scrolling, or if it sticks on scroll, then the menu will be placed outside of the viewable window, making it inaccessible.


We have the following active plugins that interact with the post add/edit form: TinyMCE Advanced v4.7.11, Advanced Custom Fields Pro v5.5.10, and Gravity Forms v2.1.3.9. Deactivating any/all of these plugins had no discernible impact on the above behaviour.

Attachments (9)

Screen Shot 2018-06-22 at 11.33.42 am.png (126.8 KB) - added by startsat60 4 weeks ago.
Initial page load
Screen Shot 2018-06-22 at 11.34.06 am.png (67.4 KB) - added by startsat60 4 weeks ago.
Failing to stick on scroll
Screen Shot 2018-06-22 at 11.35.28 am.png (72.6 KB) - added by startsat60 4 weeks ago.
Sticking on scroll
Screen Shot 2018-06-22 at 11.35.41 am.png (126.2 KB) - added by startsat60 4 weeks ago.
Unsticking in random location
Screen Shot 2018-06-22 at 11.36.59 am.png (91.5 KB) - added by startsat60 4 weeks ago.
Remaining stuck when scrolling up to the page title field
Screen Shot 2018-06-22 at 11.37.26 am.png (110.6 KB) - added by startsat60 4 weeks ago.
Remaining stuck when scroll down past the main content textarea
Screen Shot 2018-06-22 at 11.40.41 am.png (175.9 KB) - added by startsat60 4 weeks ago.
Paragraph style menu opening in correct location when not scrolled
Screen Shot 2018-06-22 at 11.40.58 am.png (247.3 KB) - added by startsat60 4 weeks ago.
Paragraph style menu opening in incorrect location when scrolled a bit
Screen Shot 2018-06-22 at 12.01.09 pm.png (629.1 KB) - added by startsat60 4 weeks ago.
Paragraph style menu rapidly becomes unusable when entering medium/long posts

Download all attachments as: .zip

Change History (12)

@startsat60
4 weeks ago

Initial page load

@startsat60
4 weeks ago

Failing to stick on scroll

@startsat60
4 weeks ago

Sticking on scroll

@startsat60
4 weeks ago

Unsticking in random location

@startsat60
4 weeks ago

Remaining stuck when scrolling up to the page title field

@startsat60
4 weeks ago

Remaining stuck when scroll down past the main content textarea

@startsat60
4 weeks ago

Paragraph style menu opening in correct location when not scrolled

@startsat60
4 weeks ago

Paragraph style menu opening in incorrect location when scrolled a bit

@startsat60
4 weeks ago

Paragraph style menu rapidly becomes unusable when entering medium/long posts

#1 @azaozz
4 weeks ago

  • Keywords reporter-feedback added

@startsat60 thanks for the bug report.

What browser are you using? Testing this in Firefox, Chrome and Edge on Win 10, all seems to work properly. It's true that this code is getting old. The "stickiness" there is implemented mostly with JS. At the time there was no other way, but now the browsers support most of it from CSS.

Not sure why the toolbar position "breaks" on scrolling. But the headings/paragraph drop-down should always hide on scroll. Perhaps this fails in your browser, or is affected by a script added by plugin? Could you try another browser to confirm?

#2 follow-up: @startsat60
4 weeks ago

@azaozz We see this behaviour on Chrome and Firefox, on multiple machines in our editorial team, all using Macs.

#3 in reply to: ↑ 2 @azaozz
4 weeks ago

Replying to startsat60:

Just tested on a Mac and all seems to work pretty well here... Is it possible that you are using some kind of script that interferes with scrolling? Do you see any errors in the browser console?

In no, try pasting this in the browser console, then press Enter:

jQuery( document ).on( 'scroll', function() {
    console.log( window.scrollY );
} );

After that when scrolling there will be a lot of numbers outputted in the console. When you scroll slowly they should be outputted "smoothly", perhaps skipping a bit. Something like this:

1
2
5
8
11
15
18
...
Last edited 4 weeks ago by azaozz (previous) (diff)
Note: See TracTickets for help on using tickets.