Make WordPress Core

Opened 12 years ago

Closed 12 years ago

#20582 closed defect (bug) (fixed)

Theme Customizer: IE 8/9 compatibility

Reported by: ocean90's profile ocean90 Owned by: koopersmith's profile koopersmith
Milestone: 3.4 Priority: high
Severity: normal Version: 3.4
Component: Customize 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 12 years ago.
hide-if-no-customize.php (416 bytes) - added by azaozz 12 years ago.
cors-test.patch (1.8 KB) - added by azaozz 12 years ago.
20582.preview-thumbnail.patch (432 bytes) - added by SergeyBiryukov 12 years ago.

Download all attachments as: .zip

Change History (33)

#1 @ocean90
12 years ago

  • Description modified (diff)

#2 @koopersmith
12 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.

#3 @koopersmith
12 years ago

[20737] fixes points 3 and 4.

#4 @SergeyBiryukov
12 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

#5 @koopersmith
12 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.

#23 @koopersmith
12 years ago

In [20761]:

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

#24 @SergeyBiryukov
12 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.

#25 @ryan
12 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

#27 @ryan
12 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.

#28 @azaozz
12 years ago

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

#29 @azaozz
12 years ago

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

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

#30 @nacin
12 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?

#31 @azaozz
12 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.

#32 @nacin
12 years 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.

#33 @azaozz
12 years 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?

@azaozz
12 years ago

#34 @ryan
12 years ago

  • Priority changed from normal to high

#35 @koopersmith
12 years 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.

#32 @koopersmith
12 years 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.

#33 @SergeyBiryukov
12 years 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.

#34 @SergeyBiryukov
12 years 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

#36 @koopersmith
12 years ago

In [20920]:

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

#37 @nacin
12 years ago

Fixed? Anything left?

#38 @SergeyBiryukov
12 years 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.

#39 @nacin
12 years ago

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

#40 @nacin
12 years ago

I've pushed the shiv conversation to #20755.

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

#41 @koopersmith
12 years 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.

#5 @koopersmith
12 years 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.