javascript - 加载时不需要的白色补丁

Question

网站加载后出现不需要的白色补丁/闪烁。此问题仅在向站点添加 css3 动画后出现。

这是 the page遇到问题了

主要是在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 对其进行了测试，因此该样式将应用于页面加载，而不是使用开发人员工具进行应用。

附带说明一下，背景图片很大 (463KB)。通过简单地以 80 jpeg 质量而不是 99 质量导出它，您可以将大小减小到仅 99KB 而质量没有明显损失。您还可以查看是否可以使用较小的背景并重复背景来达到相同的效果，这里有一个选项:http://halgatewood.com/wp-content/uploads/2011/10/linen_bg_tile.jpg