WordPress.org

Make WordPress Core

Opened 17 months ago

Last modified 17 months 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:
PR Number:

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 17 months ago.
Initial page load
Screen Shot 2018-06-22 at 11.34.06 am.png (67.4 KB) - added by startsat60 17 months ago.
Failing to stick on scroll
Screen Shot 2018-06-22 at 11.35.28 am.png (72.6 KB) - added by startsat60 17 months ago.
Sticking on scroll
Screen Shot 2018-06-22 at 11.35.41 am.png (126.2 KB) - added by startsat60 17 months ago.
Unsticking in random location
Screen Shot 2018-06-22 at 11.36.59 am.png (91.5 KB) - added by startsat60 17 months 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 17 months 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 17 months 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 17 months 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 17 months ago.
Paragraph style menu rapidly becomes unusable when entering medium/long posts

Download all attachments as: .zip

Change History (12)

@startsat60
17 months ago

Failing to stick on scroll

@startsat60
17 months ago

Unsticking in random location

@startsat60
17 months ago

Remaining stuck when scrolling up to the page title field

@startsat60
17 months ago

Remaining stuck when scroll down past the main content textarea

@startsat60
17 months ago

Paragraph style menu opening in correct location when not scrolled

@startsat60
17 months ago

Paragraph style menu opening in incorrect location when scrolled a bit

@startsat60
17 months ago

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

#1 @azaozz
17 months 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
17 months 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
17 months 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 17 months ago by azaozz (previous) (diff)
Note: See TracTickets for help on using tickets.