WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 17 months ago

Last modified 13 months ago

#44911 closed defect (bug) (fixed)

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

Reported by: joakimsilfverberg Owned by: azaozz
Milestone: 5.3 Priority: normal
Severity: critical Version: 4.9.8
Component: TinyMCE Keywords:
Focuses: administration Cc:

Description

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

Attachments (2)

IMG_0334.mp4 (2.5 MB) - added by joakimsilfverberg 2 years ago.
Video och flickering.
flickering.gif (42.7 KB) - added by noisysocks 17 months ago.

Change History (22)

@joakimsilfverberg
2 years ago

Video och flickering.

#1 @mukesh27
2 years ago

  • Focuses administration added

#2 follow-up: @mukesh27
2 years ago

  • Resolution set to duplicate
  • Status changed from new to closed

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.

Last edited 2 years ago by mukesh27 (previous) (diff)

#3 @SergeyBiryukov
2 years ago

  • Resolution duplicate deleted
  • Status changed from closed to reopened

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

Reopening for investigation.

#4 @SergeyBiryukov
2 years ago

#44928 was marked as a duplicate.

#5 @oyvindeikeland
22 months ago

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.

#6 @kokers
20 months ago

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

#7 @Howdy_McGee
19 months ago

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.

#8 @noisysocks
17 months ago

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
Last edited 17 months ago by noisysocks (previous) (diff)

#9 @noisysocks
17 months ago

#46464 was marked as a duplicate.

#10 @noisysocks
17 months ago

#44487 was marked as a duplicate.

#11 @noisysocks
17 months ago

#44402 was marked as a duplicate.

#12 follow-up: @Howdy_McGee
17 months ago

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.

#13 in reply to: ↑ 12 @kokers
17 months ago

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.

#14 in reply to: ↑ 2 @azaozz
17 months ago

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 :)

#15 @azaozz
17 months ago

  • Milestone changed from Awaiting Review to 5.3

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.

#16 @azaozz
17 months ago

  • Owner set to azaozz
  • Resolution set to fixed
  • Status changed from reopened to closed

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.

#17 @azaozz
17 months ago

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

#18 @azaozz
17 months ago

  • Keywords needs-patch removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

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

#19 @azaozz
17 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 45620:

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

Fixes #44911.

#20 @scienceofspock
13 months ago

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

Note: See TracTickets for help on using tickets.