Theme Customizer: IE 8/9 compatibility

[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:

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

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.

[20737] fixes points 3 and 4.

#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

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.

In [20761]:

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

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

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

​http://blogs.msdn.com/b/ieinternals/archive/2010/05/13/xdomainrequest-restrictions-limitations-and-workarounds.aspx

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.

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

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

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?

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.

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.

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?

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.

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.

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.

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

20582.preview-thumbnail.patch​ works.

In [20920]:

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

Fixed? Anything left?

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.

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

I've pushed the shiv conversation to #20755.

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

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.

In [20930]:

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