Toolbar of TinyMCE flickering in Firefox

  • Dear all,

    Several users of our university reported this behaviour which is only reproducible in Firefox, but not on Chromium based web browsers:

    1. Begin editing a page
    2. Insert a Classic block (TinyMCE)
    3. Mark some text
    4. Turn it into a link
    5. Enter a URL which is wider than the input field, e.g. https://de.wikipedia.org/wiki/Rindfleischetikettierungs%C3%BCberwachungsaufgaben%C3%BCbertragungsgesetz
    6. Close the input field
    7. Reopen the input field
    8. Click on the pencil to edit it
    9. Expected behaviour: Turn it into the input field again. Actual behaviour: Starts flickering and is impossible to work with.

    I found the releavant the code in file wp-include/js/tinymce/plugins/wordpress/plugin.js in line 1127 and following, stating:

    					/*
					 * Showing a tooltip may trigger a resize event in Chromium browsers.
					 * That results in a flicketing inline menu; tooltips are shown on hovering over a button,
					 * which then hides the toolbar on resize, then it repeats as soon as the toolbar is shown again.
					 */
					if ( event.type === 'resize' || event.type === 'resizewindow' ) {

    Funnily enough, there is a remark about this behaviour, but it concerns only Chromium. Firefox uses the event scroll. I tried appending it to the condition, and it really fixed the problem. However, I do not know if just appending || event.type === 'scroll' does not break other things. Actually, I think that the correct solution would be like this: The current condition is about resizing. There should be another condition which caches the previous scrolling position and bails out early if the scroll position did not change altough the event is fired.

    This code is present at least since WordPress 6.0 and also in 6.1.1.

    Kind regards, Robert.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator Marius L. J.

    (@clorith)

    Hiya,

    Thanks for the report, I see this has previously been addressed a few times. Since this isn’t a new regression in WordPress 6.2, would you mind either commenting on the previous ticket at https://core.trac.www.ads-software.com/ticket/44911, or creating a new one with the details you’ve collected so far about the issue?

    Since it’s not tied specifically to a beta release of WordPress, I’m going to mark this support topic as resolved from that point of view.

    @clorith

    Requesting reopening this again, as it has gone nowhere at the moment and it seems somehow critical:

    post editors with a Firefox browser have to stop editing the page as soon as they try to edit a link in TinyMCE, as this flickering unallow them to click anywhere on the admin editor.

    It may affect all WordPress 6.x released. Please give it a follow up. Thanks !

    Thread Starter PLUS-RobertEhrenleitner

    (@robehr79)

    @clorith I already created a new issue here.

    In my experimentations, the length of the URL has to be as big as the input to trigger the flickering. With a small URL, everything is fine.

    @robehr79 Thanks for the quick follow-up !

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Toolbar of TinyMCE flickering in Firefox’ is closed to new replies.