[wp-trac] [WordPress Trac] #57995: Popup flickering in Firefox

[WordPress Trac]

#57995: Popup flickering in Firefox
--------------------------+-----------------------------------------
 Reporter:  robehr79      |       Owner:  (none)
     Type:  defect (bug)  |      Status:  new
 Priority:  normal        |   Milestone:  6.2.1
Component:  TinyMCE       |     Version:  6.1.1
 Severity:  major         |  Resolution:
 Keywords:  needs-patch   |     Focuses:  javascript, administration
--------------------------+-----------------------------------------
Changes (by sabernhardt):

 * keywords:   => needs-patch
 * focuses:   => javascript, administration
 * milestone:  Awaiting Review => 6.2.1


Old description:

> 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/):
>
> I found the releavant 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.

New description:

 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.

--

Comment:

 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.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/57995#comment:1>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform