WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 23 months ago

#20582 closed defect (bug) (fixed)

Theme Customizer: IE 8/9 compatibility

Reported by: ocean90 Owned by: koopersmith
Milestone: 3.4 Priority: high
Severity: normal Version: 3.4
Component: Appearance Keywords: needs-patch needs-testing
Focuses: Cc:

Description (last modified by ocean90)

I found some issues with the theme customizer in IE 8 and IE 9.

#1: IE 8 - Header image preview

There is an issue with the small header image preview in the sidebar:
http://f.cl.ly/items/301S1g391g290i1l2F46/ie8-css.png

#2: IE 8 - Iframe Preview doesn't load/render html5.js

Not sure what is going on here. It happens for example with the Twenty Eleven theme, see http://cl.ly/GHjI. Seems like IE 8 doesn't like html5.js in an iframe.

#3: IE 8 and IE 9 - No preview for background color (sometimes)

Scenario:

  • Active Theme: Twenty Ten
  • Open the customize screen for Twenty Elven
  • Change the background color
  • Expected: Color changes.

But it doesn't show the new color. (Workaround: Change the header text color and the background color will be updated too.)

#4: IE 8 and IE 9 - Links inside the iframe

Clicking on a link in the preview iframe loads the active theme with the Toolbar and your will lost all your preview settings. See http://cl.ly/GGev.

#5: IE 8 and IE 9 - Header/Background image upload doesn't work

Same as in Opera, see #20452.

Attachments (4)

20582.dragdrop.patch (578 bytes) - added by SergeyBiryukov 2 years ago.
hide-if-no-customize.php (416 bytes) - added by azaozz 2 years ago.
cors-test.patch (1.8 KB) - added by azaozz 23 months ago.
20582.preview-thumbnail.patch (432 bytes) - added by SergeyBiryukov 23 months ago.

Download all attachments as: .zip

Change History (33)

comment:1 ocean902 years ago

  • Description modified (diff)

comment:2 koopersmith2 years ago

In [20737]:

Theme Customizer: Use a internal global _wpCustomizeSettings object for wp.customize.settings to prevent script race conditions in IE (which blocked interaction with the preview). see #20582, #19910.

comment:3 koopersmith2 years ago

[20737] fixes points 3 and 4.

comment:4 SergeyBiryukov2 years ago

#2: IE 8 - Iframe Preview doesn't load/render html5.js

The culprit here is that the iframe content is loaded via AJAX:
http://code.google.com/p/html5shiv/issues/detail?id=4

comment:5 koopersmith2 years ago

In [20758]:

Uploader & Theme Customizer: Refresh uploader flash/silverlight shims when the mouse enters the browse button. Add class to body based on uploader's drag/drop support. Properly assign customize image uploader containers (so flash shims are positioned correctly when scrolled). see #19910, #20452, #20582.

comment:23 koopersmith2 years ago

In [20761]:

Theme Customizer: Add a fallback UI for browsers that do not support drag and drop upload. see #19910, #20452, #20582.

comment:24 SergeyBiryukov2 years ago

#5: IE 8 and IE 9 - Header/Background image upload doesn't work

"Select a file" link works now, however "Drop a file here" area is visible in IE 8, which doesn't support HTML5 drag and drop.

comment:25 ryan2 years ago

IE 8 and 9 don't seem to work with our cross domain support. The preview doesn't load. Possibly due to http://bugs.jquery.com/ticket/8283

comment:27 ryan2 years ago

Looks like we'll have to do a browser capability check when the frontend and backend domains don't match so that we can downgrade for IE8/9 but not for 10.

comment:28 azaozz2 years ago

Or something like: if ( IE < 10 && strpos( admin_url(), siteurl ) === false ) { no customizer }.

azaozz2 years ago

comment:29 azaozz2 years ago

Small code snippet for checking for IE < 10 and domain mismatch on multisite from PHP.

Last edited 2 years ago by azaozz (previous) (diff)

comment:30 nacin2 years ago

Rather than checking the MSIE version, we'd want to check the Trident version. Otherwise we may detect IE running in compatibility mode, which I doubt applies to the underlying JS engine.

get_home_url( get_current_blog_id() ) should be home_url(). And I am not sure this check should be specific to multisite.

What about mobile?

comment:31 azaozz2 years ago

In IE9 compatibility mode doesn't affect JS that much, however in IE10 it might affect it more. Thinking it would be safer (for now) to assume IE10 in compat mode would not work exactly the same as in "standards" mode in JS.

Right, home_url() (i.e. get_home_url( null ) which returns get_option( 'home' )) should work in all domain mapping cases for multisite.

comment:32 nacin23 months ago

We mustn't forget about the toolbar's Customize link as well. That may require a bit of server-side, hide-if-no-js, plus possibly removing the node if ! window.postMessage, etc.

comment:33 azaozz23 months ago

Right, got a JS based test for CORS support that looks good for all browsers:

function(){ var xhr = new XMLHttpRequest(); return ( 'withCredentials' in xhr ); }

However we need to hide/remove some links to the customizer (in the toolbar) and change others to point to the old preview (on the Themes screen) when in IE and cross-domain.

So to handle this in JS will have to output different href for the links and swap them later, or can handle it in PHP directly. Preferences?

azaozz23 months ago

comment:34 ryan23 months ago

  • Priority changed from normal to high

comment:35 koopersmith23 months ago

In [20886]:

Theme Customizer: Check for CORS support when the preview and admin urls are cross-domain. Add a fallback to the customize control frame, and check support there as well. see #20582, #19910.

comment:32 koopersmith23 months ago

In [20893]:

Theme Customizer: Add CORS checks to the initial check for customize support. Prevents flash of customize links on large pages. see #20582, #19910.

Add wp_customize_support_script(), to quickly alter the body class based on whether customize is supported.

comment:33 SergeyBiryukov23 months ago

20582.preview-thumbnail.patch is an attempt to fix point 1 (header image preview). Tested in Firefox 12, Chrome 19, IE 8, Opera 11.64.

comment:34 SergeyBiryukov23 months ago

To summarize:

  • point 1: Header image preview is too wide in IE 8
  • comment:4: html5.js is not applied if the iframe content is loaded via AJAX
  • comment:24: "Drop a file here" area is visible in IE 8, which doesn't support HTML5 drag and drop

comment:36 koopersmith23 months ago

In [20920]:

Theme Customizer: Fix width for image picker thumbnails in IE8. props SergeyBiryukov, see #20582.

comment:37 nacin23 months ago

Fixed? Anything left?

comment:38 SergeyBiryukov23 months ago

html5.js and the drag/drop check. 20582.dragdrop.patch seems to fix the latter, but I guess the consensus was to use a Plupload instance.

comment:39 nacin23 months ago

Does the new version of the shiv (#20640) fix this?

comment:40 nacin23 months ago

I've pushed the shiv conversation to #20755.

The only thing remaining is the drag/drop issue, which koopersmith is working on.

comment:41 koopersmith23 months ago

In [20928]:

Theme Customizer: Fix IE8 drag/drop uploader incompatibility. see #20582, #19910.

Bind drag/drop support checks to individual plupload instances.
Add drag-over classes to wp.Uploader and corresponding styles to customize image controls.

comment:5 koopersmith23 months ago

  • Owner set to koopersmith
  • Resolution set to fixed
  • Status changed from new to closed

In [20930]:

Theme Customizer: Fix preview background CSS creation to insert/remove style nodes (for IE8 compatibility). fixes #20582, see #19910.

Note: See TracTickets for help on using tickets.