Sitefinity rendering CSS theme files differently in Safari than other browsers
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"
/>
<
style
type
=
"text/css"
style
=
"display:none"
>CSS style file content embedded in page</
style
>
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.