the div background appears white with zooming

Question

I have an issue with zooming, if any div has background color/border it appears completely white when i zooming in it.

I try zooming in Facebook site and this issue didn't appear.

This image can make the issue more clearly.

So what is the problem ?

HTML header css

header {
  border-bottom: 1px solid #d6d6d6;
  width: 100%;
  padding-bottom: 10px;
  background-color: #BF0404;
  color: white;
  background-position:bottom;
}

Answer 1

if problem show once you have an horizontal scrolling bar at bottom of your window ,

then do not use width:100% . This is defaut value of block element anyway, it is useless for element kept in the flow;.

width:100% will shrink it's layout on screenwidth (or parent if it has a valid width in CSS).

To allow your header to grow beyond parent's width , give it a layout that allows it to naturally expand (or shrink).

header {
  min-width:100%;/* as a block element , it should cover all width avalaible, make sure it does */
  display:table;/* will expand , so background will too*/
}

DEMO

Answer 2

It seems you have a fixed width. Try : width:100% on your div

Answer 3

必须将宽度设置为菜单的100％