Customizer doesn't load in IE8 with 4.1

[lennybratcher]

Mostly a blank screen in wordpress 4.1, can't upload or edit or anything with the "header" page, this new version needs fixing.

I have two different computers, and both have the same issue with this new update 4.1.

It worked with previous versions.

[lennybratcher]

To clarify, I mean when you try to edit the header, or change it, it is this page, the edit header page, that I am refering to.

[celloexpressions]

Seeing as that link now redirects to the Customizer, this is a bug that's preventing the Customizer from loading at all. This is most likely due to a JavaScript error caused by a plugin in the Customizer.

@lennybratcher - can you please upload a screenshot of exactly what you're seeing? I might know what you mean by "mostly blank" but would need a visual to confirm. Next step would be to find out what the error is by checking the browser console.

[lennybratcher]

Hi Celloexpressions and SergeyBiryukov
Here is a picture screenshot @
​http://lunar-sabbath.org:84/images/header-edit.jpg
It's running on windows xp machine.
Lenny

[ocean90]

Replying to lennybratcher:

Windows XP? Okay… Which version of IE are you using? And can you please click at lower left on "Error on page" and send us the error message?

[lennybratcher]

Using Internet Explorer 8

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.0.3705; .NET CLR 1.1.4322; Media Center PC 4.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Timestamp: Fri, 19 Dec 2014 20:09:28 UTC

Message: Object doesn't support this property or method
Line: 3
Char: 1167
Code: 0
URI: ​http://lunar-sabbath.org:84/wp-admin/load-scripts.php?c=1&load%5B%5D=underscore,customize-base,customize-controls,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,jquery-ui-dragga&load%5B%5D=ble,jquery-ui-droppable,backbone,wp-util,wp-backbone,customize-widgets,jquery-ui-slider,jquery-touch-punch,iris,wp-color-picker,&load%5B%5D=shortcode,media-models,wp-plupload,mediaelement,wp-mediaelement,media-views,media-editor,media-audiovideo,wp-playlist,mce-view,i&load%5B%5D=mgareaselect,image-edit,customize-models,customize-views&ver=4.1

[lennybratcher]

I discovered it works in firefox.
I guess IE 8 will soon not be supported? Time to retire it, I guess.
Anyway I can edit the header image or select a header image, now, with firefox.
Thanks for your support.

Lenny

[lennybratcher]

A little aside the main issue but related to header image is why -
Internet explorer 8 shows the header image in it's true size, but firefox shows the image exploded 4 or more times it's size?
You can view this experience at:
​http://lunar-sabbath.org:84/

[ocean90]

Replying to lennybratcher:

Message: Object doesn't support this property or method
Line: 3
Char: 1167
Code: 0

Can you please add define( 'SCRIPT_DEBUG', true ); to you wp-config.php and copy the error message again? Thanks.

[lennybratcher]

I did it and the error code is below,
Lenny

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.0.3705; .NET CLR 1.1.4322; Media Center PC 4.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Timestamp: Fri, 19 Dec 2014 21:54:57 UTC

Message: Object doesn't support this property or method
Line: 129
Char: 3
Code: 0
URI: ​http://lunar-sabbath.org:84/wp-admin/js/customize-controls.js?ver=4.1

[lennybratcher]

I added that snippet of code to my other wordpress computer, that has this same problem of IE 8 updating the header image, and this is the error code it gives.

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET4.0C; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Timestamp: Fri, 19 Dec 2014 22:27:05 UTC

Message: Expected identifier
Line: 1
Char: 13561
Code: 0
URI: ​http://sda-online.org:88/wp-includes/js/underscore.min.js?ver=1.6.0

[westonruter]

Looks like it is due to older versions of IE not supporting Array.prototype.indexOf. We need a polyfill.

[westonruter]

Polyfill plugin for Array.prototype.indexOf()

[westonruter]

@lennybratcher: Please try installing array-prototype-indexof-polyfill.php​ as a plugin and see if that fixes the issue for you. If so, then we can proceed with adding such a polyfill to Core; specifically, we should use Underscore's indexOf implementation.

This plugin would provide a workaround for the problem in the mean time.

[westonruter]

Use _.indexOf() instead of Array.prototype.indexOf()

[westonruter]

I've also provided a patch to use Underscore's indexOf in 30781.diff​. If you can apply a patch, please try that on your install with IE8 as well. Thanks!

[celloexpressions]

To clarify, the implication here is that the Customizer can't load at all in IE8 anymore. While it's (theoretically) fixable with westonruter's patch, the fact that no one even tried loading the Customizer in IE8 until after 4.1 was released is telling.

Perhaps this would be a good time to officially drop support for IE8 in the admin. Or, we could pretty easily drop support in the Customizer (which already doesn't support IE7), by adding it to the conditions of .hide-if-no-customize. Of course, this would represent a major regression in functionality for IE8 users. But if no one's willing or able to test browsers that we officially support, maybe we shouldn't support them.

[lennybratcher]

Hi westonruter,

I'm not a coder, but I'll try help.

I added the array-prototype-indexof-polyfill.php to the wp-admin folder, and modified the customize-controls.js, with the extra lines in green, 131-2 and 136-2, using editpad lite 7 on a windows xp pro machine.

I'm not sure where to add the array-prototype-indexof-polyfill.php file? Right now it is in the wp-admin folder,

But alas it still acts the same,
I think celloexpressions is right ie8 doesn't load the customizer at all.

Lenny

[lennybratcher]

After those mods, this is the error message in ie 8 -

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.0.3705; .NET CLR 1.1.4322; Media Center PC 4.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Timestamp: Sun, 21 Dec 2014 09:16:17 UTC

Message: Object doesn't support this property or method
Line: 129
Char: 3
Code: 0
URI: ​http://lunar-sabbath.org:84/wp-admin/js/customize-controls.js?ver=4.1

[lennybratcher]

It Works Now!!!

I apologize, I tried zipping the array-prototype-indexof-polyfill.php file to a zip file and added it as a plugin and activated it, and now I have the ability to edit now with IE 8, thanks a bunch westonruter.
hooray

[lennybratcher]

My mistake was I didn't comprehend westonruter's instruction, at first, to install that file as a plugin on the "plugins" page, in "administrator" role.

The header customizer page now loads in IE 8, and looks like it does in firefox.

Many Thanks for your excellent support.

[ocean90]

30781.2.diff​ fixes another issue in IE, since "default" is a reserved keyword. There is no need to drop support for IE 8 here.

[lennybratcher]

I tried this mod on my other xp machine, and in IE 8 it shows this error code, still a bug in this other computer running WP with 2012 theme.
Firefox shows the customizer page, but still IE 8 doesn't, after the same mods were made, to this machine.

Same errors as before the modifications per westonruter's directions.

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET4.0C; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Timestamp: Sun, 21 Dec 2014 12:14:04 UTC

Message: Expected identifier
Line: 1
Char: 13561
Code: 0
URI: ​http://sda-online.org:88/wp-includes/js/underscore.min.js?ver=1.6.0

[westonruter]

@lennybratcher: You error you are receiving is different.

Please also add define( 'SCRIPT_DEBUG', true ); to this other WordPress install as well.

[lennybratcher]

I did add

define( 'SCRIPT_DEBUG', true );

to the wp-config.php file.

But instead of modifying the customize-controls.js file, I copied the customize-controls.js file from the computer that is now working to this computer.

I installed the array-prototype-indexof-polyfill.php file as a plugin also.

[ocean90]

Replying to lennybratcher:

URI: ​http://sda-online.org:88/wp-includes/js/underscore.min.js?ver=1.6.0

You have to patch /wp-includes/class-wp-customize-control.php too, see 30781.2.diff​.

[lennybratcher]

I'm suspecting my second WP installation is faulty, as it didn't even have a class-wp-customize-control.php file in the wp-includes folder.

[ocean90]

In 30991:

Customizer: Improve IE 8 compatibility.

• Use square bracket notation for default keywords.
• Use Underscores indexOf for arrays.

props westonruter, ocean90.
fixes #30781 for trunk.

[lennybratcher]

Just a comment on the second computer that still doesn't open the customizer js.
That computer has some hardware issues, likely related to overheating on the i/o chipset, resulting in failure of copy and pasting, overheats while pasting the wp zip contents to the folder, with this new upgrade, as I also have turned the a/c off.(it gets hot in the winter in Orlando).

So I'm pretty sure the patch is good, and the second computer simply has a hardware malfunction. I plan on upgrading the hardware.

[lennybratcher]

update

I upgraded to another computer, from a dell gx520 to a gx620, smoothly.

But it has the same problem.

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET4.0C; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET CLR 1.1.4322)
Timestamp: Tue, 23 Dec 2014 20:22:53 UTC

Message: Expected identifier
Line: 1
Char: 13561
Code: 0
URI: ​http://sda-online.org:88/wp-includes/js/underscore.min.js?ver=1.6.0

[dd32]

In 31397:

Customizer: Improve IE 8 compatibility.

• Use square bracket notation for default keywords.
• Use Underscores indexOf for arrays.

Props westonruter, ocean90.
Merges [30991] to the 4.1 branch.
Fixes #30781.