0

<svg class="logo" ...>次の CSSを持つ要素があります。

.logo {
    opacity: 0;
    -webkit-transition: opacity 0.2s ease-in 0s;
    -moz-transition: opacity 0.2s ease-in 0s;
    -ms-transition: opacity 0.2s ease-in 0s;
    -o-transition: opacity 0.2s ease-in 0s;
    transition: opacity 0.2s ease-in 0;
}

私は Google Chrome を使用しており、CSS はBourbonとその Neat グリッドを使用した SASS で作成されています。

h1トップに到達したときにトリガーされるウェイポイント機能を設定しました。

<script>
$('h1').waypoint(function(direction) {
    var logo = $(".logo");
    if (direction === "down") {
        logo.css("opacity", 1);
    } else if (direction === "up") {
        logo.css("opacity", 0);
    }
});
</script>

ただし、不透明度は上にスクロールするときにのみアニメーション化されます。問題は、同様の要素 (SVG ロゴ、h1 タイトル、その他のコンテンツ) を使用して基本的な例を作成したところ、問題なく動作することです。

私が使用しているいくつかのライブラリが干渉しているのではないかと思います (Bourbon と Neat に加えて、通常の jquery とウェイポイント、および構文の強調表示に prism.js を使用するだけです)。

現在、最新の安定した Firefox と Internet Explorer をテストしましたが、元のページは正常に動作するため、投稿した jsfiddle の例ではなく、ページ全体の特定のコンテキストでのみ表示される Chrome の一種のバグです。

助言がありますか？

4

0 に答える 0