Inline toolbar flickers in TinyMCE instance

[kokers]

Describe the bug
When hovering over buttons that show tooltips in inline toolbar like "Edit image", "Insert/Edit link" and so on, whole toolbar is disappearing and appearing again making it impossible to click any of the buttons.

When hovering over buttons inside main toolbar with some inline toolbar opened - inline toolbar flashes once.

I've noticed this problem using ACF plugin, but it's related to any plugin that adds WYSIWYG in Gutenberg. Note, that this issue doesn't exist when using Classic Editor plugin, so this is clearly related to Gutenberg editor and something there that cause the issue.

The problem is probably with some global event triggered when showing a tooltip, because the moment I hide tooltips in CSS like:

.mce-tooltip {
    display: none !important;
}

the issue was gone, but it's not a solution to hide tooltips.

Other thing I've noticed is that changing height of the window also resolves the problem - the moment when WP is adding "sticky-menu" class to body and scrollbar is showing up. So I've tested this with scrollbar always visible:

html {
    overflow-y:scroll
}

and issue was gone again.

So with all of that, the clue to find the source of the problem is - scrollbar.

But when I've submitted this issue to ACF support, Elliot couldn't reproduce it. We found out that the difference in OS setup between mine and Elliot's mac was scrollbar setting. I had setting in System preferences > General > Show scroll bars, set to "Always", while Elliot had "Show when scrolling". He confirmed that the issue appears instantly changing the setting to "Always".

I think it must be related to some cached width value that is different with/without scrollbars and positioning tooltip. For example in CSS 100vw is a full browser width - including scrollbar, so widths are a bit trickier this times.

To reproduce
Steps to reproduce the behavior:

1. Fresh, latest install of WP [5.1.1] with default theme
2. Install Advanced Custom Fields
3. Add group field to a Page or post with single WYSIWYG field type
4. Open Gutenberg editor
5. Add text, select a fragment and click "Insert/Edit link", hover over buttons on inline toolbar

If can't reproduce - check OS settings or browser settings for scrollbar.

Screenshots

Desktop (please complete the following information):

• OS: Mac, Windows
• Browser: webkit based (Chrome, Safari, Brave) + Edge, no issue on Firefox

Additional context
There is also support thread on WordPress https://wordpress.org/support/topic/visual-editor-flashing-insert-edit-link-popup/
Old issue for RTL languages https://core.trac.wordpress.org/ticket/42018 - solution was to hide tooltips when RTL.

[petertwise]

Confirming I am seeing this issue too.

[noisysocks]

Closing this as a duplicate of WP44911—let's continue discussion over there!

[azaozz]

Should be fixed with https://core.trac.wordpress.org/changeset/45610. Please test in core trunk :)