WordPress.org

Make WordPress Core

Opened 23 months ago

Closed 23 months ago

Last modified 6 weeks ago

#20755 closed defect (bug) (fixed)

html5shiv does not work when loaded through the customizer

Reported by: nacin Owned by: koopersmith
Milestone: 3.4 Priority: low
Severity: normal Version:
Component: Appearance Keywords: has-patch commit
Focuses: Cc:

Description

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.

Attachments (2)

20755.patch (854 bytes) - added by SergeyBiryukov 23 months ago.
20755.2.patch (1.3 KB) - added by SergeyBiryukov 23 months ago.

Download all attachments as: .zip

Change History (15)

comment:1 in reply to: ↑ description ocean9023 months ago

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 .

comment:2 ocean9023 months ago

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.

comment:3 azaozz23 months ago

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.

comment:4 SergeyBiryukov23 months ago

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

SergeyBiryukov23 months ago

comment:5 SergeyBiryukov23 months ago

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.

Version 0, edited 23 months ago by SergeyBiryukov (next)

comment:6 markjaquith23 months ago

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.

SergeyBiryukov23 months ago

comment:7 SergeyBiryukov23 months ago

  • Keywords has-patch added

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

comment:8 andyadams23 months ago

  • Cc aadams@… added

comment:9 nacin23 months ago

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?

comment:10 nacin23 months ago

  • Keywords commit added; needs-testing removed

Suggest commit on 20755.2.patch.

comment:11 azaozz23 months ago

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

comment:12 koopersmith23 months ago

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

In [20995]:

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

comment:13 ircbot6 weeks ago

This ticket was mentioned in IRC in #wordpress-dev by gcorne. View the logs.

Note: See TracTickets for help on using tickets.