IE8 Filter gradient on body disables page scroll

Question

I am using the IE filter to make the background have a gradient, but only in IE8 does it have an issue. These lines make the background gradient correctly but the page will no longer scroll:

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkYjllOCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxZTU3OTkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+) no-repeat fixed;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007db9e8', endColorstr='#1e5799',GradientType=0 ) no-repeat fixed; /* IE6-8 */

I have also tried setting the height to 100%. What is wrong?

http://asthmaready.org/training-programs/

Answer 1

try to attach filter-gradient to div#page

UPDATE:

body.cbgc {
    background: -moz-linear-gradient(top,  rgba(125,185,232,0) 0%, rgba(30,87,153,1) 100%) no-repeat fixed;
    ....
}

somehow blocks subsequent #page style declaration, so when you apply a filter to it, it is ignored. Try to remove and apply filter to #page it to see if this helps.

Another point is that gradient on #page will not end on the screen edge (as in other browsers) instead it will proceed to the scrolled area. If this is relevant to you, you can add additional div, a sibling with #page, and apply to it that filter and position fixed. So everything will look the same as in non-IE browsers