WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 2 years ago

#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 3 years ago.
audio-playlist.ie8.png (11.5 KB) - added by ocean90 3 years ago.
audio.ie8.png (8.0 KB) - added by ocean90 3 years ago.
27546-01.patch (2.4 KB) - added by gcorne 2 years ago.
dashicon-edit.png (5.1 KB) - added by gcorne 2 years ago.
dashicon-no-alt.png (4.8 KB) - added by gcorne 2 years ago.
images.zip (2.6 KB) - added by gcorne 2 years ago.
27546-02.patch (4.2 KB) - added by gcorne 2 years ago.
27546-03.patch (705 bytes) - added by gcorne 2 years ago.

Download all attachments as: .zip

Change History (22)

@ocean90
3 years ago

@ocean90
3 years ago

#1 @ocean90
3 years ago

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

#2 @gcorne
2 years 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.

#3 @nacin
2 years ago

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

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


2 years ago

#5 @nacin
2 years 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

#6 @nacin
2 years ago

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

@gcorne
2 years ago

@gcorne
2 years ago

#7 @gcorne
2 years 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.

@gcorne
2 years ago

@gcorne
2 years ago

#8 @gcorne
2 years 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.

#9 @azaozz
2 years 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

@gcorne
2 years ago

#10 @gcorne
2 years 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.

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


2 years ago

#12 @SergeyBiryukov
2 years ago

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

#13 @azaozz
2 years 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.