Opened 2 months ago
Last modified 6 days ago
#57995 new defect (bug)
Popup flickering in Firefox
Reported by: |
|
Owned by: | |
---|---|---|---|
Milestone: | 6.2.3 | Priority: | normal |
Severity: | major | Version: | 6.0 |
Component: | TinyMCE | Keywords: | needs-patch dev-feedback |
Focuses: | javascript, administration | Cc: |
Description (last modified by )
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/):
- Begin editing a page in the block editor
- Insert a Classic block (TinyMCE)
- Mark some text
- Turn it into a link
- Enter a URL which is wider than the input field, e.g.
https://de.wikipedia.org/wiki/Rindfleischetikettierungs%C3%BCberwachungsaufgaben%C3%BCbertragungsgesetz
- Close the input field
- Reopen the input field
- Click on the pencil to edit it
- 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.
Change History (10)
#1
@
2 months ago
- Description modified (diff)
- Focuses javascript administration added
- Keywords needs-patch added
- Milestone changed from Awaiting Review to 6.2.1
#2
@
2 months ago
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:
- Create post
- Add 'Classic' block (did not have tinyMCE)
- 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.
#3
@
8 weeks ago
- Keywords dev-feedback added
- Version changed from 6.1.1 to 6.0
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?
This ticket was mentioned in Slack in #core by audrasjb. View the logs.
3 weeks ago
This ticket was mentioned in Slack in #core by audrasjb. View the logs.
3 weeks ago
#7
@
3 weeks ago
- Milestone changed from 6.2.1 to 6.2.2
@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!
#8
@
9 days ago
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
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.