Can't Edit Image in RTL/Hebrew version of WordPress

[rivkasa]

After inserting image into editor, the Edit image toolbar flickers and it's buttons can't be pressed

[rivkasa]

Screenshot

[adamsilverstein]

Hi @rivkasa - thanks for your bug report and welcome to trac.

i was able to reproduce this issue in Chrome Dev. Can you confirm the browser/version OS you are on? I did not see the issue in Firefox.

[adamsilverstein]

Chrome seems to be firing a 'scrollwindow' event when the toolbar is displayed, causing it to hide again, creating the loop.

42018.diff​ removes the listener and this fixes the issue in chrome, however i think this is a browser bug, not a wp bug.

[azaozz]

Confirmed in Chrome version 61.0.3163.100 (Official Build) (64-bit). Yeah, looks like a browser bug: it erroneously fires scrollwindow on mouse move when the cursor is over the toolbar buttons, only in RTL mode (there is no actual scrolling). This may be CSS/styling related. The same happens when the image toolbar is shown and the cursor hovers over the buttons in the main toolbar.

Don't think it is a good idea to remove hiding of the toolbar on scrolling. This will leave it "hanging" in place after the user has scrolled the editor and the image is no longer visible. Perhaps only as a last resort and only in Chrome in RTL mode.

[azaozz]

Caused by showing the .mce-tooltip div (that is appended at the end of the body) and setting left: [value]px on it from JS at the same time. Don't seem to find a CSS based workaround for this, seems Chrome shows the div before applying the styles to it, so the window height is changed despite that the div is with position: absolute;. Looking for another workaround.

[adamsilverstein]

Don't think it is a good idea to remove hiding of the toolbar on scrolling. This will leave it "hanging" in place after the user has scrolled the editor and the image is no longer visible. Perhaps only as a last resort and only in Chrome in RTL mode.

Absolutely agree, I only uploaded the patch to demonstrate the issue. Wonder if this is a known issue or something that should get fixed upstream? seems hacky: maybe remove the scroll listener before showing the div, then re-add it?

[azaozz]

In 41643:

TinyMCE: fix "flickering inline toolbar" in Chrome in RTL mode by not showing tooltips while an inline toolbar is shown.

Fixes #42018.

[azaozz]

Replying to adamsilverstein:

uploaded the patch to demonstrate the issue

Yeah, figured it.

Seeing some general slowness when the tooltips are shown, even they fail sometimes. There's definitely "something" going on in Chrome...

[leac]

Thanks so much for taking care of this issue. It's been bugging many Hebrew speaking users. I've been seeing posts about it in WordPress Development Facebook groups in Hebrew, and some people (myself included) have reported it in the forums: ​here and ​here.

Just out of curiosity, do you know why it happens only in RTL?

[danstramer]

Hi
I am still experiencing this bug.
This happens also with the add link/link editor tooltip.
I am using this version of chrome:
Version 62.0.3202.75 (Official Build) (64-bit)

Is there a way to solve this in the meantime?
Dan

[westonruter]

Given @azaozz being on sabbatical, @iseulde can you provide support here?

[iseulde]

@danstramer Did you test this with trunk, or with the latest WordPress version 3.8?

[danstramer]

Tested with WP 4.8.2

Replying to iseulde:

@danstramer Did you test this with trunk, or with the latest WordPress version 3.8?

[adamsilverstein]

@danstramer This issue appears fixed in trunk and should be corrected in the next release - 4.9, currently planned for November 14th - ​https://make.wordpress.org/core/4-9/. If you want to help, you can test this fix with the Beta Testers plugin - ​https://wordpress.org/plugins/wordpress-beta-tester/.

Thanks!

[danstramer]

Thanks @adamsilverstein,
Is there an option to override a file with the fix before November 14th?
Replying to adamsilverstein:

@danstramer This issue appears fixed in trunk and should be corrected in the next release - 4.9, currently planned for November 14th - ​https://make.wordpress.org/core/4-9/. If you want to help, you can test this fix with the Beta Testers plugin - ​https://wordpress.org/plugins/wordpress-beta-tester/.

Thanks!

[danstramer]

Thanks @adamsilverstein,
Is there an option to override a file with the fix before November 14th?
Replying to adamsilverstein:

@danstramer This issue appears fixed in trunk and should be corrected in the next release - 4.9, currently planned for November 14th - ​https://make.wordpress.org/core/4-9/. If you want to help, you can test this fix with the Beta Testers plugin - ​https://wordpress.org/plugins/wordpress-beta-tester/.

Thanks!

[SergeyBiryukov]

#42342 was marked as a duplicate.

[SergeyBiryukov]

#42374 was marked as a duplicate.

[adamsilverstein]

Is there an option to override a file with the fix before November 14th?

@danstramer the easiest way would be to install and run the beta tester's plugin. Please let us know if this fixes your issue!

[danstramer]

Thanks.
Will this be ok on a production site?

Replying to adamsilverstein:

Is there an option to override a file with the fix before November 14th?

@danstramer the easiest way would be to install and run the beta tester's plugin. Please let us know if this fixes your issue!

[adamsilverstein]

Replying to danstramer:

Thanks.
Will this be ok on a production site?

I would say no! It is beta software :) Safer to wait for the next release.

Maybe you can work around the issue using the editor text mode or switch your interface into english? Sorry, I know that isn't a great solution!

[leac]

There are ways to open the editing link and image windows even in Chrome. I collected them and wrote them ​| on the forum, but I'll list them here too:

Regarding links:

• Inserting: Just paste the link on the text you want the link to be. WordPress will turn the text into a link, without having to use the hovering toolbar at all

• Editing: After clicking the link the toolbar appears. In order to get to the gear button tab twice, and then press the Enter button – that will open the link editing window.

Regarding Images:

• Editing and Aligning: After clicking the image the toolbar appears. Click the desired button *a long click*, and the window will open or the image will be aligned as desired.

[leac]

@adamsilverstein, How about applying the patch, could that also be a recommended solution in the meantime?

[danstramer]

Thanks @leac, thanks @adamsilverstein.
Having 40 Hebrew client sites that all have this issue is a real problem.
I would apply a patch in the meantime till the 4.9 update, but this current situation is not something that I can tell my clients: "wait a couple of weeks till it's fixed"
What would be the quickest wait till 4.9?
IS there a guide as to which files I can override with the corrected code?

Thanks again,
Dan

[adamsilverstein]

Note: this bug only affects recent versions of chrome, so switching another browser or is another possible temporary solution.

[mukesh27]

#44911 was marked as a duplicate.

[mukesh27]

#44928 was marked as a duplicate.

[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.