Jquery Android 4.0.4上页面的背景线性渐变在滚动和触摸上发生变化

我正在Andriod设备上测试4.0.4版的网页。网站的背景设置为线性渐变

background-image: -webkit-gradient(linear, left top, left bottom, from(#afe3f3 10% /*{a-body-background-start}*/), to(#FFFFFF 35% /*{a-body-background-end}*/)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient( #a1ddf1 10% /*{a-body-background-start}*/, #FFFFFF 35% /*{a-body-background-end}*/); /* Chrome 10+, Saf5.1+ */
background-image:    -moz-linear-gradient( #a1ddf1 10% /*{a-body-background-start}*/, #FFFFFF 35% /*{a-body-background-end}*/); /* FF3.6 */
background-image:     -ms-linear-gradient( #a1ddf1 10% /*{a-body-background-start}*/, #FFFFFF 35% /*{a-body-background-end}*/); /* IE10 */
background-image:      -o-linear-gradient( #a1ddf1 10% /*{a-body-background-start}*/, #FFFFFF 35% /*{a-body-background-end}*/); /* Opera 11.10+ */
background-image:         linear-gradient( #a1ddf1 10% /*{a-body-background-start}*/, #FFFFFF 35%/*{a-body-background-end}*/);
background-attachment: fixed;

当我尝试在字段中输入数据并显示键盘时，渐变百分比会不断变化，从而导致颜色随机变化

有人知道这个问题的解决方法吗

我尝试在调整窗口大小时使用jQuery添加样式，但它不起作用

var initialScreenSize = window.innerHeight;
window.addEventListener("resize", function () {
    if (window.innerHeight < initialScreenSize) {
        $("[data-role=footer]").hide();
    }
    else {
        $("[data-role=footer]").show();
    }

    var isAndroid = navigator.userAgent.toLowerCase().indexOf('android') > -1;
     if (isAndroid) {
           $("[data-role=page]").css('background-image', '-webkit-linear-gradient( #afe3f3 10% , #FFFFFF 35%');

    }
});

var initialScreenSize=window.innerHeight；
addEventListener（“调整大小”，函数（）{
if（window.innerHeight-1；
if（isAndroid）{
css（'background-image'，'-webkit线性渐变（#afe3f3 10%，#FFFFFF 35%）；
}
});

元素是否具有动态高度？它是静态高度。最小高度设置为div.div[data role=“content”]{背景附件：固定；最小高度：200px；左填充：10%；右填充：10%；}