Question

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

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

    }
});

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

0 个答案: