[css] Viewport redraw repeats gradient background rather than extending/resizing it in IE

[Garacesh]

The page behaves as expected in Chrome and Firefox, both desktop and Android versions, but with Internet Explorer triggering a CSS element that extends the page downwards causes the background to repeat rather than extend.

 

Possibly not describing it too great, so here's some hopefully-clearing-it-up screenshots..

 

CSS for the background is:

html {
   font-size: 1em;
   background-repeat: no-repeat;
   background: -moz-linear-gradient(#FFFFFF, #CCCCCC); /* FF 3.6+ */  
   background: -ms-linear-gradient(#FFFFFF, #CCCCCC); /* IE10 */  
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FFFFFF), color-stop(100%, #CCCCCC)); /* Safari 4+, Chrome 2+ */  
   background: -webkit-linear-gradient(#FFFFFF, #CCCCCC); /* Safari 5.1+, Chrome 10+ */  
   background: -o-linear-gradient(#FFFFFF, #CCCCCC); /* Opera 11.10 */  
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr=#CCCCCC); /* IE6 & IE7 */  
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr=#CCCCCC)"; /* IE8+ */  
   background: linear-gradient(#FFFFFF, #CCCCCC); /* the standard */  
   min-height: 100%;
   min-width: 768px;
}

 

Any idea how (or even if?) I can prevent this happening?

 

Happy to PM the page to members if need be, just not posting it for all-and-sundry because it identifies my school