1

サイトの読み込み後に、不要な白いパッチ/フラッシュが表示されます。この問題は、サイトに 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;
    }
}

これで私を助けてください。

4

1 に答える 1

2

このCSSを使用してみてください：

html, body{ height: 100%; }

それはあなたの問題を完全に解決します。Tampermonkey を使用してテストしたところ、スタイルは開発者ツールを使用して適用するのではなく、ページの読み込み時に適用されます。

余談ですが、その背景画像は巨大です (463KB)。99 ではなく 80 jpeg 品質でエクスポートするだけで、品質を著しく損なうことなくサイズをわずか 99KB に減らすことができます。小さい背景を使用して背景を繰り返すことで、同じ効果を実現できるかどうかを確認することもできます。オプションは次のとおりです。

于 2013-08-10T13:32:02.090 に答える