I was unable to reproduce in IE7(IE9 with Browser and Document Mode set to 7).
Please include more info or a reproducible example and I'd be happy to help.
EDIT:
It seems that when then mouse enters the page after scrolling, it redraws the button. Based on my browsing experience, it is hard to notice. I suggest to force it to redraw the button when it becomes visible.
This small jQuery method will handle that, although further optimizations can be made. Please test it and leave a comment if it needs adjustments.
$('#my-button').RedrawWhenVisible();
$.fn.RedrawWhenVisible = function()
{
$(window).scroll(function() {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = this.offset().top;
var elemBottom = elemTop + this.height();
// If element is partially visible...
if((elemBottom <= docViewBottom && elemBottom >= docViewTop) || (elemTop >= docViewTop && elemTop <= docViewBottom)) {
//Redraw it, just once.
if(this.attr('data-redraw')) {
this.hide().show();
// Prevent further draws.
this.removeAttr('data-redraw');
}
} else {
// The element is not visible...
if(!this.attr('data-redraw')) {
// Flag it to redaw on scroll.
this.attr('data-redraw','redraw');
}
}
}
}
EDIT 2:
Since the other button is fine, I bet it's a very specific CSS issue. Double check all of the attributes for those CSS classes, the grey button is fine so check how that button differs from the Orange/Yellow one.