Popup flickering in Firefox

[robehr79]

This bug is somehow related to #44911, however, 5 years after that, the bug appears in Firefox. I copy-paste here what I wrote in the forum (​https://wordpress.org/support/topic/toolbar-of-tinymce-flickering-in-firefox/):

1. Begin editing a page in the block editor
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 relevant code in the 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.

[sabernhardt]

Hi and thanks for the report!

It flickered for me, too, in the editor's Classic block but not in the Classic Editor. I used Firefox 111.0.1 in Windows 10, and it still occurs with WordPress 6.2 RC4.

[kelvinballoo]

So I want to expand on this more.

I've reproduced the issue with the classic block on a few browsers on PHP 7.4 , WordPress 6.1.1:

1. Create post
2. Add 'Classic' block (did not have tinyMCE)
3. Add text under classic block and assign URL to it.

Here are my observations:
-> Safari (Version 16.3 (17614.4.6.11.6, 17614)) - Works perfect.

-> Chrome (Version 111.0.5563.146 (Official Build) (x86_64)) - There are some flickers that happened when I tried to select the inserted URL (URL is longer than the input field) but it's still workable. The flicker should be fixed though.

-> Firefox (111.0.1 (64 bit))- This is the most problematic.

• Not only the flicker is much more, you hardly can do anything when you have a long URL. Sometimes the URL popup won't even appear.
• Short URLs are fine but sometimes the link popup won't disappear after clicking elsewhere on the page.
• If you have a scenario with 2 links, one which is a short URL which was working fine...and if you insert another long URL somewhere else on the page, this will affect the experience for the short URL too.

[costdev]

Pinging @azaozz as TinyMCE component maintainer to take a look if available. Note ​the support thread mentioned in this ticket's summary also.

A couple of questions for consideration:

• Is a fix needed here, or in Gutenberg?
• This issue has existed in 6.0, 6.1 and now 6.2. Should a fix be committed to trunk only, or should it be backported to the 6.2 and possibly the 6.1 branches?

[parrishh]

#58072 was marked as a duplicate.

[audrasjb]

@costdev it has to be committed to trunk and backported to branch 6.2 only :)

As per today's bug scrub, let's move this ticket to 6.2.2.
If a patch is added to the ticket before tomorrow 15:00 UTC and WP 6.2.1 RC1, feel free to move it back to milestone 6.2.1!

[robehr79]

Sorry for coming up this way by simply putting the patch verbatim here, but I think that this is the fix to the flickering, as patch generated with Git:

--- a/wp-includes/js/tinymce/plugins/wordpress/plugin.js
+++ b/wp-includes/js/tinymce/plugins/wordpress/plugin.js
@@ -790,12 +790,14 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
                        currentSelection,
                        timeout,
                        container = editor.getContainer(),
+                       editorContainer = document.querySelector(".interface-navigable-region.interface-interface-skeleton__content"),
                        wpAdminbar = document.getElementById( 'wpadminbar' ),
                        mceIframe = document.getElementById( editor.id + '_ifr' ),
                        mceToolbar,
                        mceStatusbar,
                        wpStatusbar,
-                       cachedWinSize;
+                       cachedWinSize,
+                       cachedScrollPos;
 
                        if ( container ) {
                                mceToolbar = tinymce.$( '.mce-toolbar-grp', container )[0];
@@ -1154,6 +1156,19 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
                                                }
                                        }
 
+                                       if ( event.type === "scroll" || event.type === "scrollwindow" ) {
+
+                                               if ( cachedScrollPos ) {
+                                                       if ( editorContainer.scrollLeft === cachedScrollPos.X && editorContainer.scrollTop === cachedScrollPos.Y ) return;
+                                               } else {
+                                                       cachedScrollPos = {
+                                                               X: editorContainer.scrollLeft,
+                                                               Y: editorContainer.scrollTop,
+                                                       };
+                                                       return;
+                                               }
+                                       }
+
                                        clearTimeout( timeout );
 
                                        timeout = setTimeout( function() {
@@ -1165,6 +1180,7 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
 
                                        activeToolbar.scrolling = true;
                                        activeToolbar.hide();
+                                       cachedScrollPos = null;
                                }
                        }
                }
-- 

Feel free to improve it accordingly. Sadly enough, this fixes the flickering but there is another issue: The toolbar does not close reliably when it loses the focus, neither in Firefox nor in Chrome, neither with nor without this fix.

Sorry, I won't have time to investigate deeper. I hope my contribution helps.

Kind regards,
Robert

[desrosj]

Moving this to 6.2.3.

[lgladdy]

This also happens in Chrome when TinyMCE is being displayed in a meta box with a position set to side in the classic editor.