Blue bar in the header disappearing on zoom in Sharepoint 2013

Question

I noticed this in IE8. In Chrome it seems to be working fine. When I zoom in or out the page (CTRL+mouse wheel scroll or using the buttons in the browser's menu) the blue bar of the header disappears. This site is using the seattle.master,but it's the same with the oslo.master too.

Here, let me show you what I mean:

• Before zoom

• After zoom

I also noticed, that if I disable the following CSS property in corev15.css, it works, regardless of the level of the zoom:

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

Could somebody tell me, if this a general bug in the SP2013 master pages, or is it happening just on my environment(s)? Also, what is the cause of this (probably IE, as always) and what elegant solution could I apply? (Disabling that CSS property -> not elegant :) )

Thanks a lot!

Answer 1

I can confirm that it does it in my lab environment with using IE8... Vanilla 2013 install with default 2013 master.

I'm guessing it's an IE8 limitation of not being able to process the gradient filter under zoomed condition. I'd probably write a custom CSS class to push a background color separately and see if that takes in scenarios where the gradient can't be used.

Answer 2

add a custom CSS line and the issue is resolved:

 #suiteBarLeft{
   filter: none !important; 
}