none
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:

    Missing top bar

    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)

    Monday, November 5, 2012 10:07 AM

Answers

  • 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)

    Monday, November 5, 2012 2:13 PM
  • 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. 
    • Marked as answer by Kris Frukacz Tuesday, March 12, 2013 8:24 PM
    • Unmarked as answer by Kris Frukacz Tuesday, March 12, 2013 8:24 PM
    • Marked as answer by Kris Frukacz Tuesday, March 12, 2013 8:25 PM
    Sunday, March 3, 2013 7:41 PM

All replies

  • 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)

    Monday, November 5, 2012 2:13 PM
  • 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;
    }

    • Proposed as answer by A Chuvash Guy Tuesday, May 7, 2013 12:17 PM
    Friday, January 18, 2013 3:18 AM
  • 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!


    • Edited by janzend Tuesday, January 29, 2013 4:41 PM
    Tuesday, January 29, 2013 4:40 PM
  • 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)

    Tuesday, January 29, 2013 8:07 PM
  • 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.
    Wednesday, February 27, 2013 7:14 PM
  • 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)

    Wednesday, February 27, 2013 7:17 PM
  • 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. 
    • Marked as answer by Kris Frukacz Tuesday, March 12, 2013 8:24 PM
    • Unmarked as answer by Kris Frukacz Tuesday, March 12, 2013 8:24 PM
    • Marked as answer by Kris Frukacz Tuesday, March 12, 2013 8:25 PM
    Sunday, March 3, 2013 7:41 PM
  • 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;
     }
    Friday, June 14, 2013 4:29 PM