WNAS

Redraw problem in ie 7

I got me the strangest problem in IE7, when scrolling a button out of view and than scrolling back, the button got some strange stripes. These disappear when you hover over the button, causing a redraw. Anybody seen this before?

The code for the button is pretty straight forward, a button with a span inside to use ‘sliding doors’ for the backgroundimages. I have been using this for a while and have never seen anything like this.

If you have a solution, or know what is happening here, please let me know on twitter.

Update

The problem only occurs when you scroll down, so that the button slides upwards out of view. It does not happen when you scroll up…

It also only seems to affect the span inside the button…

HTML code

<button><span>text on button</span></button>

CSS code

/* BUTTONS */
		
button { 
	border: 1px solid transparent; /*1px border solves redraw problem */
	padding: 0;
	cursor: pointer;
	overflow: visible; /* removes extra side padding in IE */
}

button::-moz-focus-inner {
	border: none;  /* overrides extra padding in Firefox */
}

/* OPTIONAL BUTTON STYLES for applying custom look and feel: */		
.button { 
	padding: 0 14px 0 0; 
	margin-right:5px; 
	font-size:12px; 
	text-align: center; 
	background: url(img/buttons-sprite.png) no-repeat right -28px; 
}

/* IE makes the background of the button shift when pushing the button */
*:first-child+html button.active {
	background-position: right -86px;
}

.button span {
	display:inline-block;
	padding: 3px 0 0 26px; 
	height:20px; 
	background: transparent url(img/buttons-sprite.png) no-repeat 0 0; 
	color:#fff; 
}

Solution

The solution I found was applying a transparent 1pixel border around the button… So adding this:

border: 1px solid transparent;

Solves my redraw Issue, strange….