WordPress.org

Make WordPress Core

Opened 18 months ago

Closed 8 months ago

Last modified 4 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 18 months ago.
Video och flickering.
flickering.gif (42.7 KB) - added by noisysocks 8 months ago.

Change History (22)

@joakimsilfverberg
18 months ago

Video och flickering.

#1 @mukesh27
18 months ago

  • Focuses administration added

#2 follow-up: @mukesh27
18 months 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 18 months ago by mukesh27 (previous) (diff)

#3 @SergeyBiryukov
18 months 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
18 months ago

#44928 was marked as a duplicate.

#5 @oyvindeikeland
12 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
10 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
9 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
8 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 8 months ago by noisysocks (previous) (diff)

#9 @noisysocks
8 months ago

#46464 was marked as a duplicate.

#10 @noisysocks
8 months ago

#44487 was marked as a duplicate.

#11 @noisysocks
8 months ago

#44402 was marked as a duplicate.

#12 follow-up: @Howdy_McGee
8 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
8 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
8 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
8 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
8 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
8 months ago

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

#18 @azaozz
8 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
8 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
4 months ago

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

Note: See TracTickets for help on using tickets.