Inline image editor does not appear in the Chrome browser

[fieldsf]

Using Version 39.0.2171.95 m of Google Chrome, the inline image editor does not appear after clicking on the image in the Visual Editor.

There is no problem seeing the inline image editor on the same computer for the same site when using Mozilla Firefox.

FYI: Before reporting this, I opened ten (10) of my own sites in Chrome and in Firefox, all of which are on three different hosting accounts, and the results are the same. This includes one site that I created from scratch yesterday. The toolbar doesn't show in the Chrome browser, but it does show in the Firefox browser.

[Bonesnap]

What sort of plugins/extensions do you have installed on Chrome? I am unable to reproduce this on Chrome and I am running the same version, but don't have any plugins/extensions installed.

[iseulde]

Also works for me with Chrome 39.0.2171.95 (64-bit). Are you sure you don't have any active plugins and are using one of the default themes? Do you see any ​JavaScript errors? Could you give us specific steps to reproduce the problem?

[fieldsf]

Aw, I didn't think about the add-ons I have in Chrome causing this issue. Let me disable them one-by-one and see if one of them is causing the issue. I'm glad to know that it's most likely just on my end and not something wrong with WordPress itself. It makes it easier to deal with.

Just FYI, the add-ons I have activated in Chrome are: Check All | Pocket | YSlow | AdBlock | Send to Kindle.

Apologies for the delayed reply to your reply.

Replying to Bonesnap:

What sort of plugins/extensions do you have installed on Chrome? I am unable to reproduce this on Chrome and I am running the same version, but don't have any plugins/extensions installed.

[fieldsf]

Thanks for taking the time to reply. I pretty much said all I initially had to say about this in the previous reply to Bonesnap, but I thought it would be impolite to not at least acknowledge that you took the time to also chime in. As I mentioned in that reply. I'm about to deactivate my Chrome add-ons to see if one of them is causing me not to be able to see the inline image editor. I'll report my findings as soon as I get this done. Thank you, too, for making mention of the fact that it may be an add-on issue.

Replying to avryl:

Also works for me with Chrome 39.0.2171.95 (64-bit). Are you sure you don't have any active plugins and are using one of the default themes? Do you see any ​JavaScript errors? Could you give us specific steps to reproduce the problem?

[fieldsf]

You were correct. It was an extension, but it wasn't one of the ones I listed. It was one that I forgot all about.

The "After the Deadline" extension in Chrome causes the inline image editor not to show.

Thanks, again, for the suggestion.

Replying to Bonesnap:

What sort of plugins/extensions do you have installed on Chrome? I am unable to reproduce this on Chrome and I am running the same version, but don't have any plugins/extensions installed.

[fieldsf]

Avryl: It was the "After the Deadline" extension in Chrome that was causing the issue. Thanks, again, for chiming in on the ticket. I really do appreciate your time.

Replying to avryl:

Also works for me with Chrome 39.0.2171.95 (64-bit). Are you sure you don't have any active plugins and are using one of the default themes? Do you see any ​JavaScript errors? Could you give us specific steps to reproduce the problem?

[fieldsf]

I closed this as not a valid bug, because it wasn't a problem with WordPress. It was an issue with an extension in my browser. The "After the Deadline" extension for Chrome causes the inline image editor not to show.

Many thanks to Bonesnap and Avryl for pointing out to me that it might be an extension and not the Chrome browser itself.

Apologies for the bad bug report and for any confusion it caused.

Replying to fieldsf:

Using Version 39.0.2171.95 m of Google Chrome, the inline image editor does not appear after clicking on the image in the Visual Editor.

There is no problem seeing the inline image editor on the same computer for the same site when using Mozilla Firefox.

FYI: Before reporting this, I opened ten (10) of my own sites in Chrome and in Firefox, all of which are on three different hosting accounts, and the results are the same. This includes one site that I created from scratch yesterday. The toolbar doesn't show in the Chrome browser, but it does show in the Firefox browser.

[lencw]

I disagree that this is not a Wordpress issue.
I urge you to reconsider that this is a bug introduced in WP4.1.
I have reported this on the forum of the theme I use, until I discovered that there is no issue with the TwentyTen but there is with later themes and its reported with other themes after I did some searching, but only after upgrade to Wordpress4.1.
I do agree there is a conflict with "After The Deadline", but the issue arose and was introduced with the Wordpress4.1 upgrade not a change to After the Deadline.
This strongly suggests that its a change in Wordpress that has triggered this, as it was OK before.
Many people use After the Deadline with Chrome, so this issue cannot be brushed aside as has been done here.
LenW

[SergeyBiryukov]

Moving for investigation.

[iseulde]

We need a bit more information. Do you see any ​JavaScript errors?
It also appears the extension is not supported any more.
I will install it and see what i find.

[iseulde]

After I installed the Chrome extension form Github ​https://github.com/Automattic/atd-chrome I can confirm that the toolbar is completely misplaced. Looks like something goes wrong when calculation the image position. No JS errors.

[iseulde]

Hah, found the problem. Making a patch. :)

[dd32]

Seems very easy to duplicate, just installed the ATD extension from the Chrome Store thing and the toolbar doesn't appear.
Notes:

• No JS Errors
• The toolbar appears on the right hand edge, sometimes like in the screenshot above, other times in a 2x3 grid
• The toolbar doesn't always appear on the right hand edge, sometimes it's not there at all (It seems like it gets positioned way down the DOM, because I can see it in the inspector)
• Resizing the window appears to make it vanish again.
• No ATD CSS is conflicting, it looks like the offset for the toolbar is calculated incorrectly:

  element.style {
     left: 986px;
     top: 903px;
  }
  

(I completely missed avryl's comments...)

[iseulde]

ATD inserts a tiny icon just between the iframe container and iframe itself, causing the wrong offset to be added. We just take the first element of the iframe wrap (which should always only contain the iframe), but ATD injects an icon there with JS...
So the solution would be to make sure we get a child that is an iframe.

[dd32]

Patch worksforme (until another extension inserts an invisible iframe there instead ;))

[iseulde]

This might be better then. :) Unfortunately TinyMCE doesn't provide a method to get the iframe directly.

[lencw]

A big thanks to you guys for looking into this.
When will it appear as an automatic Wordpress update?

[azaozz]

In 31180:

TinyMCE: select the iframe element by id. Needed as some browser extensions insert extra elements in the page. Props avryl, see #30785.

[dd32]

In 31436:

TinyMCE: select the iframe element by id. Needed as some browser extensions insert extra elements in the page.

Props iseulde.
Merges [31180] to the 4.1 branch.
Fixes #30785.