加载时出现不需要的白色补丁

Question

站点加载后，我收到了不需要的白色补丁/闪烁。这个问题是在向网站添加css3动画后才出现的。

这是遇到问题的页面

这主要是在windows计算机上的chrome中体验到的。

以下是动画的触发方式。

Javascript

$(window).load(function () {
    $("#illustrations").css("display", "block");
    $("#illustrations").addClass('anim');
});
$(document).ready(function () {
    $("#illustrations").css("display", "none");
    $("a.transition").click(function (event) {
        event.preventDefault();
        linkLocation = this.href;
        $("#illustrations").removeClass('anim');
        $("#illustrations").addClass('reverseAnim');
        //window.location = linkLocation;
        redirectInverval();
    });
    function redirectPage() {
        $("#illustrations").css("display", "none");
        window.location = linkLocation;
    }
    function redirectInverval() {
        setInterval(redirectPage, 1000);
    }
});

CSS

.anim {
    -webkit-animation:myfirst 1s;
    /* Safari and Chrome */
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    /*-webkit-backface-visibility: hidden;*/
}
@keyframes myfirst {
    0% {
        top:-600px;
        transform:rotate(30deg);
        -webkit-transform: rotate(30deg);
    }
    50% {
        transform:rotate(30deg);
        -webkit-transform: rotate(30deg);
    }
    100% {
        top:0px;
    }
}
@-webkit-keyframes myfirst
/* Safari and Chrome */
 {
    0% {
        top:-600px;
        transform:rotate(30deg);
        -webkit-transform: rotate(30deg);
    }
    50% {
        transform:rotate(30deg);
        -webkit-transform: rotate(30deg);
    }
    100% {
        top:0px;
    }
}
.reverseAnim {
    -webkit-animation:myfirstRev 1s;
    /* Safari and Chrome */
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    -webkit-backface-visibility: hidden;
}
@keyframes myfirstRev {
    0% {
        top:0px;
        transform:rotate(30deg);
        -webkit-transform: rotate(30deg);
    }
    50% {
        transform:rotate(30deg);
        -webkit-transform: rotate(30deg);
    }
    100% {
        top:-600px;
    }
}
@-webkit-keyframes myfirstRev
/* Safari and Chrome */
 {
    0% {
        top:0px;
        /*-webkit-transform: rotate(30deg);*/
    }
    50% {
        top: 50px;
        transform:rotate(10deg);
        -webkit-transform: rotate(10deg);
    }
    100% {
        top:-600px;
    }
}

请帮我做这个。

Answer 1

尝试使用此css：

html, body{ height: 100%; }

它完全解决了你的问题。我刚刚使用Tampermonkey对其进行了测试，因此该样式应用于页面加载，而不是使用Developer工具应用。

顺便说一下，这个背景图像是巨大的（463KB）。只需将其导出为80jpeg质量，而不是99，就可以将大小缩小到99KB，而不会明显降低质量。您还可以查看是否可以使用较小的背景并重复背景来实现相同的效果，这里有一个选项：http://halgatewood.com/wp-content/uploads/2011/10/linen_bg_tile.jpg