WordPress.org

Make WordPress Core

#27546 closed defect (bug) (fixed)

Issues with Tiny MCE Views in IE8

Reported by: ocean90 Owned by: gcorne
Milestone: 3.9 Priority: high
Severity: major Version: 3.9
Component: TinyMCE Keywords: has-patch commit
Focuses: Cc:

Description

In IE8 after selecting a view like gallery, audio or playlist, you can see the shortcode. See attached screenshots.

Attachments (9)

gallery.ie8.png (71.7 KB) - added by ocean90 16 months ago.
audio-playlist.ie8.png (11.5 KB) - added by ocean90 16 months ago.
audio.ie8.png (8.0 KB) - added by ocean90 16 months ago.
27546-01.patch (2.4 KB) - added by gcorne 15 months ago.
dashicon-edit.png (5.1 KB) - added by gcorne 15 months ago.
dashicon-no-alt.png (4.8 KB) - added by gcorne 15 months ago.
images.zip (2.6 KB) - added by gcorne 15 months ago.
27546-02.patch (4.2 KB) - added by gcorne 15 months ago.
27546-03.patch (705 bytes) - added by gcorne 15 months ago.

Download all attachments as: .zip

Change History (22)

@ocean9016 months ago

@ocean9016 months ago

comment:1 @ocean9016 months ago

In audio.ie8.png the edit toolbar also overlaps the play icon.

comment:2 @gcorne15 months ago

The primary issue here is being caused by ie7_compat being set to true, which is the default in TinyMCE. This causes <meta http-equiv="X-UA-Compatible" content="IE=7" /> to be written out in the <head> of the iframe. It doesn't fix all the issues, but it is at least usable in terms of working with views and editing images.

comment:3 @nacin15 months ago

  • Owner set to gcorne
  • Status changed from new to assigned

comment:4 @ircbot15 months ago

This ticket was mentioned in IRC in #wordpress-dev by nacin. View the logs.

comment:5 @nacin15 months ago

Plan per IRC:

  • Prepare fallbacks in the form of image placeholders and also images for edit/delete icons
  • speak to Spocke (TinyMCE) what may break if we have IE8 without the IE7 compat mode (we can either keep IE7 compat mode on for IE7, or just turn off TinyMCE entirely for IE7)
  • Commit to one or the other by Wednesday

comment:6 @nacin15 months ago

  • Priority changed from normal to high
  • Severity changed from normal to major

@gcorne15 months ago

@gcorne15 months ago

@gcorne15 months ago

comment:7 @gcorne15 months ago

27546-01.patch adds the following ie8/ie7 tinymce fixes:

  • Adds fallback background images for dashicons
  • Use inline instead of inline-block
  • Add a hack to hide the clipboard while still allowing the contents to be selected
  • Work around lack of border-box in gallery styles

We still need to try and find a way to keep the ugly control selection bars from appearing where possible, and it seems that the padding elements are not being stripped in all cases.

@gcorne15 months ago

@gcorne15 months ago

comment:8 @gcorne15 months ago

images.zip includes new versions of the dashicon fallback images that @melchoyce made for me. They are a bit sharper and bolder than the original versions that I posted.

27546-02.patch fixes an issue where when a view is selected, it was super hard to place the caret in content that precedes the view in IE8. The patch also makes the ugly gray bars appear less frequently by always deselecting and then reselecting the view in IE. The bars will appear on mousedown and then disappear on mouseup.

comment:9 @azaozz15 months ago

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

Fixed in [28062]:

Fix TinyMCE Views in IE8 and 7:

  • Add fallback background images for dashicons.
  • Fix hiding the clipboard while still allowing the contents to be selected.
  • Work around lack of border-box in gallery styles.

(Includes precommit cleanup for theme.js)
Props gcorne, fixes #27546

@gcorne15 months ago

comment:10 @gcorne15 months ago

27546-03.patch fixes a regression introduced in [28062] where the type of event used to deselect a wpview was always mouseup, which was not intended. For Chrome, it needs to be mousedown in order for the caret to be placed at the proper position.

comment:11 @ircbot15 months ago

This ticket was mentioned in IRC in #wordpress-dev by gcorne. View the logs.

comment:12 @SergeyBiryukov15 months ago

  • Keywords has-patch commit added; needs-patch removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

comment:13 @azaozz15 months ago

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

In 28063:

TinyMCE Views in IE8 and 7: change deselect event only for old IE, props gcorne, fixes #27546

Note: See TracTickets for help on using tickets.