none
Globally disappearing styles after page load

    Pergunta

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

    segunda-feira, 5 de novembro de 2012 10:07

Respostas

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

    segunda-feira, 5 de novembro de 2012 14:13
  • 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. 
    • Marcado como Resposta Kris Frukacz terça-feira, 12 de março de 2013 20:24
    • Não Marcado como Resposta Kris Frukacz terça-feira, 12 de março de 2013 20:24
    • Marcado como Resposta Kris Frukacz terça-feira, 12 de março de 2013 20:25
    domingo, 3 de março de 2013 19:41

Todas as Respostas

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

    segunda-feira, 5 de novembro de 2012 14:13
  • 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;
    }

    • Sugerido como Resposta A Chuvash Guy terça-feira, 7 de maio de 2013 12:17
    sexta-feira, 18 de janeiro de 2013 03:18
  • 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!


    • Editado janzend terça-feira, 29 de janeiro de 2013 16:41
    terça-feira, 29 de janeiro de 2013 16:40
  • 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)

    terça-feira, 29 de janeiro de 2013 20:07
  • 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.
    quarta-feira, 27 de fevereiro de 2013 19:14
  • 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)

    quarta-feira, 27 de fevereiro de 2013 19:17
  • 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. 
    • Marcado como Resposta Kris Frukacz terça-feira, 12 de março de 2013 20:24
    • Não Marcado como Resposta Kris Frukacz terça-feira, 12 de março de 2013 20:24
    • Marcado como Resposta Kris Frukacz terça-feira, 12 de março de 2013 20:25
    domingo, 3 de março de 2013 19:41
  • 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;
     }
    sexta-feira, 14 de junho de 2013 16:29