Sitefinity rendering CSS theme files differently in Safari t

Posted by Community Admin on 04-Aug-2018 01:45

Sitefinity rendering CSS theme files differently in Safari than other browsers

All Replies

Posted by Community Admin on 13-Jan-2016 00:00

I've noticed that my Sitefinity website is rendering the CSS theme files differently in Safari than Chrome, Firefox, and even IE. I'm using the cssLoadOrder.xml method of calling the theme CSS files.

In non-Safari browsers, all the CSS files are called like this:

<link href="[css file url]" type="text/css" rel="stylesheet" />

In Safari, most of the CSS files are called like this, embedded in the page:
<style type="text/css" style="display:none">CSS style file content embedded in page</style>

Although there is one CSS file in my theme folder that's called like in other browsers, and I can't figure out why that's different. There's nothing different about it as far as I can tell.

This matters to me since even the default Sitefinity styles are called like this, embedded in the page. And for some reason Telerik.Sitefinity.Resources.Themes.LayoutsBasics.css is loaded after all of my theme files in the front-end, despite following all the advice in this thread.  

I've been removing that reference by using Javascript:

$('link[href^="/Telerik.Web.UI.WebResource.axd"]').remove();

But obviously that hack doesn't work if the CSS file content is embedded directly in the page. This completely breaks my site layout in Safari. My only/last resort is to embed yet another CSS file in my page template, whose only purpose is to overwrite Telerik.Sitefinity.Resources.Themes.LayoutsBasics.css, and using a lot of !important which obviously isn't great front-end practice...

Is there a documented explanation as to why it's rendering differently in Safari? I haven't seen it.

This thread is closed