TinyMCE pop-up box for adding links flickers and cant be clicked when using Chrome

[joakimsilfverberg]

Hi!

Im having problems when i try adding links to new posts or pages. The pop-up box where i add the URL just flickers when i hover the buttons for "apply" or "options".

I've tried to clear cache, remove all plugins and using the Twenty Seventeen theme, still same result (see video).

The issue is only with Chrome, all other browsers work perfectly.

Wordpress version: 4.9.8
Chrome version: 69.0.3497.81

[joakimsilfverberg]

Video och flickering.

[mukesh27]

Duplicate of #42018.

Hi @joakimsilfverberg, welcome to WordPress Trac! Thanks for the ticket.

Note: this bug only affects recent versions of chrome, so switching to any other browser for temporary solution.

[SergeyBiryukov]

#42018 is closed as fixed in 4.9; it looks like the issue has reappeared since then.

Reopening for investigation.

[SergeyBiryukov]

#44928 was marked as a duplicate.

[oyvindeikeland]

Hi, i m on WP 5.1 and i have the same issue, it is seen in custom fields that use the classic wp_editor, i am using the ACF Pro plugin 5.7.12 with wysiwyg field.

It occurs in both mac and windows in Chrome and IE/Edge, only Firefox is excluded from the bug.

I have tried with no other plugins installed and with a clean install with twentyninteen theme.

[kokers]

Similar issue for WP with gutenberg. I've posted details about it few days ago on github ​https://github.com/WordPress/gutenberg/issues/14878

[Howdy_McGee]

Unfortunately this issue has been around for a decent amount of time and seems to happen sporadically regardless of theme or plugins. It seems to only effect -webkit- browser as far as I can tell. I'm open to suggestions on how to circumvent the issue but I don't think switching browsers is an optimal solution.

[noisysocks]

Closed these related tickets as duplicates: #44756, #44487, #44402, [GB14878], #46464

I was able to reproduce the bug in Chrome on macOS with the following:

1. Go to System Preferences and change the Show scroll bars setting to Always
2. Activate the Classic Editor plugin
3. Create a new post and type in some text
4. Select some text and insert a link
5. Hover over the Apply button

[noisysocks]

#46464 was marked as a duplicate.

[noisysocks]

#44487 was marked as a duplicate.

[noisysocks]

#44402 was marked as a duplicate.

[Howdy_McGee]

If this is the main discussion - I'm almost certain the issue lies with the tooltips JS. Removing the tooltips implementation seems to fix the issue but that is certainly not a possible solution.

[kokers]

Replying to Howdy_McGee:

If this is the main discussion - I'm almost certain the issue lies with the tooltips JS. Removing the tooltips implementation seems to fix the issue but that is certainly not a possible solution.

Yes it is and it's related to scrollbar. Adding:

html {
    overflow-y:scroll
}

solves this issue as described here ​https://github.com/WordPress/Gutenberg/issues/14878

Probably there is a problem with cached width or something that triggers some action that cause flickering.

[azaozz]

Replying to mukesh27:

Yes, this seems to be the same bug as in #42018, only this time it happens in LTR too. Also, seems to be Chrome specific bug, cannot reproduce in other Chromium based browsers (on Win10).

Thinking it's worth it looking for a better solution that [41643], it was a quick fix. Seems it is CSS related: an element inserted at the bottom of the body (from js) and with position: absolute triggers a scroll event. The flickering happens because we hide the floating toolbar on scroll, but hovering over any button in it triggers adding a tooltip which triggers scroll.

One difficulty here is that we don't have access to the js inserting the element. The TinyMCE tooltip divs are added/removed internally, and not exposed in the API. Will get to the bottom of it :)

[azaozz]

Think I got to the bottom of this, finally. It is a different bug than #42018. Now when a TinyMCE tooltip is shown, Chromium browsers fire resize event if there's no vertical scrollbar on the window (and scrollbars are enabled on Mac). This is still a browser bug, but thankfully the old bug with firing scroll in RTL is now fixed.

Patch coming up.

[azaozz]

In 45610:

TinyMCE: fix flickering inline toolbar when hovering over the buttons there and the vertical scrollbar is not shown (the page height is less than the window height). Improves/removes the previous fix for similar flickering but only in RTL, see #42018.

Props joakimsilfverberg, mukesh27, kokers, Howdy_McGee, noisysocks, azaozz.
Fixes #44911.

[azaozz]

Committed for easier testing. Please reopen if this still happens in some cases and/or some browsers.

[azaozz]

Not there yet, found another case where it still flickers.

[azaozz]

In 45620:

TinyMCE: fix flickering inline toolbar when showing a tooltip. Take two.

Fixes #44911.

[scienceofspock]

We're still seeing this behavior with the classic editor in 5.2.4