jquery - スクロールとタッチで Android 4.0.4 のページの背景の線形グラデーションが変化する

Question

バージョン 4.0.4 の Android デバイスで Web ページをテストしています。ウェブサイトの背景は線形グラデーションに設定されています。

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%');

    }
});