WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

#30785 closed defect (bug) (fixed)

Inline image editor does not appear in the Chrome browser

Reported by: fieldsf Owned by: dd32
Milestone: 4.1.1 Priority: normal
Severity: normal Version: 4.1
Component: TinyMCE Keywords: fixed-major has-patch commit
Focuses: ui, javascript Cc:
PR Number:

Description

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.

Attachments (3)

Screen Shot 2015-01-13 at 9.22.34 pm.png (499.8 KB) - added by dd32 5 years ago.
30785.patch (672 bytes) - added by iseulde 5 years ago.
30785.2.patch (649 bytes) - added by iseulde 5 years ago.

Download all attachments as: .zip

Change History (26)

#1 follow-ups: @Bonesnap
5 years ago

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.

#2 follow-ups: @iseulde
5 years ago

  • Focuses javascript added; performance removed
  • Keywords reporter-feedback added

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?

#3 in reply to: ↑ 1 @fieldsf
5 years ago

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.

#4 in reply to: ↑ 2 @fieldsf
5 years ago

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?

#5 in reply to: ↑ 1 @fieldsf
5 years ago

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.

#6 in reply to: ↑ 2 @fieldsf
5 years ago

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

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?

#7 in reply to: ↑ description @fieldsf
5 years ago

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.

#8 @ocean90
5 years ago

  • Component changed from Media to Editor
  • Keywords reporter-feedback removed
  • Milestone Awaiting Review deleted

#9 @lencw
5 years ago

  • Resolution invalid deleted
  • Status changed from closed to reopened

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

#10 @SergeyBiryukov
5 years ago

  • Milestone set to Awaiting Review

#11 @SergeyBiryukov
5 years ago

  • Milestone changed from Awaiting Review to 4.1.1

Moving for investigation.

#12 @iseulde
5 years ago

  • Component changed from Editor to TinyMCE

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.

#13 @iseulde
5 years ago

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.

#14 @iseulde
5 years ago

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

#15 @dd32
5 years ago

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

Last edited 5 years ago by dd32 (previous) (diff)

@iseulde
5 years ago

#16 @iseulde
5 years ago

  • Keywords has-patch added

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.

#17 @dd32
5 years ago

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

@iseulde
5 years ago

#18 @iseulde
5 years ago

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

#19 @lencw
5 years ago

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

This ticket was mentioned in Slack in #core by jorbin. View the logs.


5 years ago

#21 @azaozz
5 years ago

In 31180:

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

#22 @azaozz
5 years ago

  • Keywords fixed-major commit added

#23 @dd32
5 years ago

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

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.

Note: See TracTickets for help on using tickets.