html5shiv does not work when loaded through the customizer

[nacin]

This might not be something we can solve for everyone, but it is likely something we can solve for Twenty Eleven. At the very least, we should investigate it as much as possible.

The html5shiv does not work when loaded through the customizer. A relevant bug report is ​http://code.google.com/p/html5shiv/issues/detail?id=4, "HTML5 elements dont retain styling when loaded via AJAX". This causes styling issues in IE8 for Twenty Eleven.

There is a new version of the shiv, #20640. I do not know if this solves our issue. koopersmith indicated that ocean90 tested and it did not.

This should not be considered a blocker for RC1, but we should do what we can to figure out what is going on, and come up with some possible routes to solve it.

This was spun from #20582.

Replying to nacin:

There is a new version of the shiv, #20640. I do not know if this solves our issue. koopersmith indicated that ocean90 tested and it did not.

Right. Usually this should work with jQuery 1.7 and a newer html5shiv. Previously you had to use ​innerShiv .

Since I don't have an uncompressed version of the html5shiv 1.6.2, I'm testing with 3.5.

From what I can see is, that html5shiv seems to run too late in the preview. Adding alert('shiv'); to shivDocument runs in frontend before the page is rendered. In the iframe I get the alert when the page is more or less ready.

As far as I know the html5 shim is a simple hack that's supposed to run in the html head, i.e. before the body is rendered. Perhaps we could detect the presence of it in the content returned by the XHR and run it in the iframe's head before inserting the content.

That would mean outputting the <script...> tag in the head and waiting for it to load while we hold on to the actual content. Or perhaps we can do another XHR to get it and run it and then insert the rest.

20755.patch​ is an experimental attempt which seems to work with Twenty Eleven. Would require #16024 for a cleaner integration.

Also noticed that html5shiv (both 1.6.2 and pre3.6 versions) works too when printed directly on wp_head (in the same way as in 20755.patch​). Just doesn't work when included from a separate file (so #16024 wouldn't help here).

I think I'm fine with an inline solution, considering that it's only on the customizer views. And if we get #16024 in the future, we can make it cleaner.

20755.2.patch​ adds a separate function instead of piggybacking on customize_preview_base().

The JS code pretty much resembles the first revisions of html5shiv.

Still wondering why a standalone JS file gets loaded later in the customizer than it does on the front end (as noted by ocean90 in comment:2).

Still wondering why a standalone JS file gets loaded later in the customizer than it does on the front end (as noted by ocean90 in comment:2).

Did someone get a chance to look into this?

Suggest commit on 20755.2.patch​.

As far as I can see 20755.2.patch works well, commit +1.

In [20995]:

Theme Customizer: Add an inline html5 shiv to the preview to ensure html5 elements render properly. props SergeyBiryukov, fixes #20755.