2

サイトのセクションの背景画像で全幅と全高を使用していますが、Android で動作が不安定です。modernizr を使用して touchevents を検出し、background-attachment を固定からローカルに変更しています。これがサイトで、以下は私が使用しているcssです。

.intro, .behind-the-scenes, .the-scene, .the-stage, .contact {
    height: 100vh;
    min-width: 100%;
    color: $white;
    display: table;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

// if a touchevent is detected

.touchevents {

    .intro, .behind-the-scenes, .the-scene, .the-stage, .contact {
        background-attachment: local;
    }
}
4

1 に答える 1

1

この問題は、次の 2 つのプロパティが Chrome for Android ブラウザの動作と組み合わされて発生しました。

CSS:

.intro,
.behind-the-scenes,
.the-scene,
.the-stage,
.contact {
    height: 100vh;
    background-size: cover;
}

ユーザーが下にスクロールすると、ブラウザーの上部のツールバーが消え、5 つの要素の高さが増します。background-sizeが画像に設定されているため、cover同様にすばやくストレッチする必要があります。

解決

モバイル デバイスではテストできませんでしたが、プロパティにトランジションを追加heightすると問題が解決する可能性があります。

.intro,
.behind-the-scenes,
.the-scene,
.the-stage,
.contact {
    -webkit-transition: height 0.2s linear;
    transition: height 0.2s linear;
}

それが役に立たない場合は、ページの読み込み時とウィンドウのサイズ変更時にこれらの要素の高さを設定する jQuery ソリューションがあり、上部のツールバーが消えるたびに背景がジャンプすることはありません。

jQuery:

(function($) {
    var elements = $('.full-height');

    function elementHeightFix() {
        var windowHeight = $(window).height();

        elements.each(function() {
            $(this).css('height', windowHeight);
        });

    }

    $(window).resize(function() {
        elementHeightFix();
    });

    elementHeightFix();
}(jQuery));

簡単にするために、単一のセレクターを使用しました。セレクターをオブジェクトに格納し、それらを反復処理できます。私は主に CoffeeScript と TypeScript を使用しているため、純粋な jQuery コードが乱雑になる可能性があることに注意してください。

于 2016-01-19T01:23:08.783 に答える