WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

#30781 closed defect (bug) (fixed)

Customizer doesn't load in IE8 with 4.1

Reported by: lennybratcher Owned by: ocean90
Milestone: 4.1.1 Priority: normal
Severity: normal Version: 4.1
Component: Customize Keywords: has-patch commit fixed-major
Focuses: javascript Cc:
PR Number:

Description

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.

Attachments (3)

array-prototype-indexof-polyfill.php (2.5 KB) - added by westonruter 5 years ago.
Polyfill plugin for Array.prototype.indexOf()
30781.diff (934 bytes) - added by westonruter 5 years ago.
Use _.indexOf() instead of Array.prototype.indexOf()
30781.2.diff (2.5 KB) - added by ocean90 5 years ago.

Download all attachments as: .zip

Change History (35)

#1 @lennybratcher
5 years ago

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.

#2 @SergeyBiryukov
5 years ago

  • Component changed from General to Customize

#3 @celloexpressions
5 years ago

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.

#4 follow-up: @lennybratcher
5 years ago

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

#5 in reply to: ↑ 4 @ocean90
5 years ago

  • Keywords reporter-feedback added

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?

#6 follow-up: @lennybratcher
5 years ago

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

#7 @lennybratcher
5 years ago

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

#8 @lennybratcher
5 years ago

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/

#9 in reply to: ↑ 6 @ocean90
5 years ago

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.

#10 @lennybratcher
5 years ago

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

#11 @lennybratcher
5 years ago

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

#12 @westonruter
5 years ago

  • Focuses javascript added
  • Keywords needs-patch added; reporter-feedback removed
  • Milestone changed from Awaiting Review to Future Release
  • Version set to 4.1

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

@westonruter
5 years ago

Polyfill plugin for Array.prototype.indexOf()

#13 @westonruter
5 years ago

@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
5 years ago

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

#14 @westonruter
5 years ago

  • Keywords has-patch added; needs-patch removed
  • Milestone changed from Future Release to 4.1.1

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!

#15 @celloexpressions
5 years ago

  • Priority changed from normal to high
  • Severity changed from normal to major
  • Summary changed from broken "Header" screen in new update 4.1 to Customizer doesn't load in IE8 with 4.1

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.

#16 @lennybratcher
5 years ago

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

#17 @lennybratcher
5 years ago

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

#18 @lennybratcher
5 years ago

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

#19 @lennybratcher
5 years ago

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.

Last edited 5 years ago by lennybratcher (previous) (diff)

@ocean90
5 years ago

#20 @ocean90
5 years ago

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

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.

#21 follow-up: @lennybratcher
5 years ago

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

#22 @westonruter
5 years ago

@lennybratcher: You error you are receiving is different.

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

#23 @lennybratcher
5 years ago

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.

#24 in reply to: ↑ 21 @ocean90
5 years ago

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.

#25 @lennybratcher
5 years ago

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.

#26 @ocean90
5 years ago

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

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.

#27 @ocean90
5 years ago

  • Keywords fixed-major added
  • Resolution fixed deleted
  • Status changed from closed to reopened

#28 @lennybratcher
5 years ago

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.

#29 @lennybratcher
5 years ago

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

#30 @nacin
5 years ago

  • Keywords commit added

This ticket was mentioned in Slack in #core by westonruter. View the logs.


5 years ago

#32 @dd32
5 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

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.

Note: See TracTickets for help on using tickets.