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

Before zoom

  • After 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!

2 Answers 2


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.

  • Added possible resolution (untested).
    – webdes03
    Jun 20, 2013 at 15:32
  • Thanks. If you could give me an example on your custom CSS class, I might accept this as an answer.
    – Norbert
    Jun 26, 2013 at 19:32

add a custom CSS line and the issue is resolved:

   filter: none !important; 
  • Yeah, that's what I meant by "disabling that CSS property -> not elegant" :) But thanks anyway.
    – Norbert
    Jun 26, 2013 at 8:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.