[Resolved] IE 11 issue with backtick character in injected CSS

[Author]

Posts

[johnD-41]

Pagination is causing a JavaScript error in IE. If I am using AJAX pagination in a View that also includes custom CSS in the Block editor, several JavaScript errors are shown in the browser on IE 11, including "Invalid character" and "Unable to get property 'split' of undefined or null reference".

[Christian Cox]

As discussed, I'm escalating this to my 2nd tier support team for some additional investigation. In the meantime, I suggest moving your custom CSS code out of the View and into a separate stylesheet, or into Appearance > Customize > Additional CSS. That will help work around the backtick character issue.

It doesn't seem to have anything to do with pagination, by the way...any View with or without pagination that includes custom CSS will trigger the same issue, due to the method in which custom CSS is injected into the page. I'll follow up when I have some feedback from the 2nd tier team.

[johnD-41]

Hi Team,

Any update on this issue? It is a blocker for us as the layout is broken.

Thank you.

[Nigel]

Please see Christian's reply. Until this is fixed, you can move the custom CSS as he describes.

[johnD-41]

Ah yes! Understood - will try to move and check. Thank you.

[johnD-41]

Hello Nigel,

I tried this. Though it works, it has its side effects.

Now I have conflicting styles because everything is being loaded on every page through appearance > customize.

I wanted to keep different views css separated.

So this issue needs to be resolved soon - I can wait temporarily.

Thanks.

[Nigel]

OK, an alternative workaround would be to add a Custom HTML block (outside of the View) and add your CSS style rules there, inside style tags, e.g.

<style type="text/css">
/* your css declarations here */
</style>

[Christian Cox]

Another alternative is to scope your CSS using descendent selectors based on the corresponding View ID. For example instead of:

p {
 color:#333;
}

...scope that to only apply to those tags within a specific View:

.js-wpv-layout-view-1234 p {
  color:#333;
}

The issue has been escalated to our developers and and erratum has been posted: https://toolset.com/errata/adding-custom-css-to-templates-and-views-broken-in-ie11/
Feel free to close the forum ticket here and follow the erratum post by clicking "Subscribe to comments" to receive updates as we work to resolve the issue. Thanks again for the report.

[johnD-41]

The workaround has has worked for me temporarily. Looking forward to see the fix in the new build. Thank you!