WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

Last modified 17 months 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: Customize 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 3 years ago.
20755.2.patch (1.3 KB) - added by SergeyBiryukov 3 years ago.

Download all attachments as: .zip

Change History (15)

comment:1 in reply to: ↑ description @ocean903 years 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 @ocean903 years 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 @azaozz3 years 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 @SergeyBiryukov3 years ago

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

@SergeyBiryukov3 years ago

comment:5 @SergeyBiryukov3 years 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 3 years ago by SergeyBiryukov (next)

comment:6 @markjaquith3 years 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.

@SergeyBiryukov3 years ago

comment:7 @SergeyBiryukov3 years 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 @andyadams3 years ago

  • Cc aadams@… added

comment:9 @nacin3 years 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 @nacin3 years ago

  • Keywords commit added; needs-testing removed

Suggest commit on 20755.2.patch.

comment:11 @azaozz3 years ago

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

comment:12 @koopersmith3 years 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 @ircbot17 months ago

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

Note: See TracTickets for help on using tickets.