Globally disappearing styles after page load

Question

Hello everyone,

I just started working on preparing a design for a SharePoint 2013 Preview site and after a while after enabling the Publishing Feature on the site collection and web I started getting a very weird behaviour, for example the top blue bar disappears as in the following screenshot:

It is happening both on normal Publishing site collections as well as other web apps (!). I can usually see the top blue bar being rendered but it seems to disappear after 1-3s (or when the page stops loading).

I didn't make any changes to files in the hive or altered any core CSS - and I am stuck without any idea on how to fix this issue. Any feedback/help would be greatly appreciated :)

---

Evoke IT - All Things SharePoint (http://www.evokeit.com)

Answer 1

Ok, got to the bottom of this infuriating niggle - it turns out that site looks ok under Chrome. Server has an IE8 installed and what seems to cause the exact issue is this particular CSS line of following divs (IDs) - suiteBarLeft and suiteBarRight:

filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ff0072c6,endColorstr=#ff0072c6); BACKGROUND-COLOR: transparent

I am not sure if it's some setting in IE8 that I might have set by mistake causing it but I will investigate further as well.

---

Evoke IT - All Things SharePoint (http://www.evokeit.com)

Answer 2

Hi guys, 

Had the same issue with SharePoint 2013. As a result, just overrided "filter" property for #suiteBarLeft.

#suiteBarLeft {
background-color: rgb(100, 1, 58) !important;
color: rgb(255, 255, 255) !important;
filter: none !important;
}

Answer 3

Would you be willing to elaborate on this some more? Im starting to use sharepoint in a learning enviroment, I'm having this exact same problem,  and I am not sure where to find this line, Thanks!

Answer 4

It's in corev4.css file if I remember it correctly. 

Funnily enough when I got the custom master page to the point of working fine the weird behaviour stopped.

I am on a training course right now so can't really check any details but will see if the problem disappeared completely when I get back :)

---

Evoke IT - All Things SharePoint (http://www.evokeit.com)

Answer 5

Did anyone figure out the root cause of this? I saw the suggestions above, however this doesnt not 100% add up. I have the same issue, but I have other employees running the exact same windows build, IE build, and same settings that I have that experience no issue. Based on only certain users having issues, changing a global setting doesnt appear to be the solution as not everyone is impacted.

Answer 6

I agree. Need to put some time aside for this issue - for no reason it stopped happening for couple of weeks and came back recently... :(

---

Evoke IT - All Things SharePoint (http://www.evokeit.com)

Answer 7

Not sure if this is related for everyone else seeing this issue, but I was able to resolve by changing my Internet Explorer to 100% under Menu Bar - View - Zoom. Once I did this, the issue went away. I tested this on multiple different computers I had the issue on. In all instances when it was set to 100%, I was able to see the Blue Bar. Every time I switch it to something other than 100%, the blue bar disappears. Obviously the blue bar should display no matter what the setting is on a user by user basis, but I have not found the solution for that yet. 

Answer 8

This was certainly giving us a headache. Anytime the browser was at any zoom other than 100%, the Suite Bar background would disappear -- but only in IE8.

Adding !important to the background-color and filter attributes of the #suiteBarLeft id selector to a custom css file was the fix!

Such as:

#suiteBarLeft {
background-color: #0072c6 !important; 
filter: none !important;
}

or you can use the class specifically for IE8:

.ms-core-needIEFilter #suiteBarLeft {
 filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ff0072c6,endColorstr=#ff0072c6) !important;
 }