web-dev-qa-db-ja.com

CSS変換と組み合わせた場合のchromeでの添付画像のちらつき/消失を修正

私は現在、視差のウェブサイトのテーマをやっています。背景画像は、jqueryがすべてにふさわしくないように、特定の「div」および「セクション」に対して修正済みとして添付する必要があります。問題は、Google Chromeでのみ、変換の実行中にアニメーションアイテムの下のタグの背景画像が消えることでした。療法？

backgroundfixedparallaxflickerbackground-attachment
42
BlackPanther

これは非常に一般的な未解決の謎でした。最近、同じ問題があり、「-webkit-backface-visibility：hidden」は、背景が設定されたときに消えてしまったため、（「固定」添付された背景上では）役に立たないことがわかりました。 （追加情報：背景が固定に設定されている場合、固定の「div」を背景に配置し、元のdiv背景を透明に設定するのとほとんど同じです。 backfaceは明白なことを行います）。

現在の問題を解決するには、要素の「position」プロパティを「static」として設定するか、他の値、つまり「relative '、'fixed 'または' absolute '、それらを削除します。

Positionプロパティの設定を覚えていなくても問題が解決しない場合は、デバッグツールをchromeまたはfirefox、に使用することをお勧めします

「static」以外の「position」プロパティに手動で値を設定しないようにしてください

ちょうど30分を検索に費やしました。 :)

64
BlackPanther

答えるのに少し遅れるかもしれませんが、このバグには、chromeのbackground-attachment：fixedプロパティが付属しているようです。その価値が「スクロール」に変わるソリューションを見つけました。 firefoxでジッター効果が発生しますが、CSSで次のようなメディアブラウザークエリを使用して回避できます。

.yourstellarlayer{
     background-attachment: fixed;
}
/*only for webkit  browsers*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .yourstellarlayer{ 
        background-attachment: scroll;
    }
}

それが役に立てば幸い！

14
Santirisco

私はChromeで同じ問題を抱えていましたが、ページ内であまりにも多くのことが起こっているときに発生するバグのようです。固定位置要素に次の変換コードを追加することで修正できました（transform: translateZ(0);-webkit-transform: translateZ(0);）ブラウザがハードウェアアクセラレーションを使用してデバイスのグラフィカル処理ユニット（GPU）にアクセスし、ピクセルを飛ばすようにします。一方、Webアプリケーションはブラウザーのコンテキストで実行されます。これにより、ソフトウェアがレンダリングの大部分（すべてではないにしても）を実行できるようになり、遷移の処理能力が低下します。しかし、Webは追いついており、ほとんどのブラウザベンダーは特定のCSSルールを使用してグラフィカルハードウェアアクセラレーションを提供しています。

-webkit-transformの使用：translate3d（0,0,0）; CSSトランジションのためにGPUを実行し、スムーズ（高FPS）にします。

注： translate3d（0,0,0）は、表示内容に関しては何もしません。オブジェクトをx、y、z軸で0px移動します。これは、ハードウェアアクセラレーションを強制する手法にすぎません。

#element {
    position: fixed;
    /* MAGIC HAPPENS HERE */
    transform: translateZ(0);
    -moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    -webkit-transform: translateZ(0);
    -webkit-font-smoothing: antialiased; /* seems to do the same in Safari Family of Browsers*/
}
8
Neo

これは本当に私を悩ませ、ほとんど私の夜を台無しにしました。私の修正は設定することです

background-attachment: scroll;

それは私のプロジェクトで機能しました。
この前に、私はそれを修正しました。お役に立てれば。

4
Ming Huang

私にとって問題は、スタイルが固定された背景を持つdivの親要素にアタッチすることでした。私は-webkit-backface-visibility: inherit;私の固定divの2つの主要な親に。

私の場合、私は財団のオフキャンバスを使用していたので、このようになります

.off-canvas-wrap{
    -webkit-backface-visibility:inherit;
}

.inner-wrap{
    -webkit-backface-visibility:inherit;
}
4
Fabian Rios

position: fixed;要素にも同様の問題がありました。この要素には、絶対的に配置された画像を含む、比較的配置されたコンテナが含まれていました。 CSSトランジションでは、トランジションが完了すると画像が消えます。

Body要素を含むいくつかの要素で-webkit-backface-visibilityをhiddenに設定して問題を解決しようとしましたが、これは役に立ちませんでした。このスレッドの助けを借りて、ChromeのWebインスペクターを使用して要素のpositionプロパティをいじり、サイトをそれほど変更することなく問題を解決できました。 （固定要素の親の位置をstaticに変更するだけでした）

3
lmeurs

私もクロムで同じ問題を抱えていました

ウェブキットとメディアタグを追加する必要はありません。以下の手順に従ってください。

1. background：url（ 'path-to-image'）の代わりに、以下のように画像を設定し、位置を固定に設定します

2. chromeおよびIE browser

1
Arul Sidthan

だから私はChromeバージョン40であり、まだこの問題が発生しています。現時点で私のために働いている回避策は、そのdivに相対的な内部div設定位置を作成し、それを高さに合わせることですその親の背景を固定し、背景の添付ファイルを固定して親divに背景を設定します。

<section style="background-attachment: fixed;">
 <div style="position: relative;">
  // Code goes here including absolute posiioned elements
 </div>
</section>

この問題は、私の場合、同じ要素に相対位置と背景の添付ファイルが固定されている場合に発生するようです。

お役に立てれば。

1
imdpk

固定背景画像を使用して要素にtransformプロパティを追加します。任意の位置に設定できます。

#thediv {
    width: 100%;
    height: 600px;
    position: relative;
    display: block;
    background-image: url(https://cdn.shopify.com/s/files/1/1231/8576/files/hockeyjacket1.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    border: 10px solid black;
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}

https://jsfiddle.net/rkwpxh0n/2/

1
Digggid

Firefox 30.0で動作するソリューション（2014.7.11）、chrome 35.0、opera 22.0、つまり11.0：

ステップ1：これらの行を.htaccessに追加します：

# cache for images
<FilesMatch "\.(png)$">
Header set Cache-Control "max-age=10000, public"
</FilesMatch>

ステップ2：プリロードするイメージを追加します（例：：

var pics = []; // CREATE PICS ARRAY

$(document).ready(function(){
    ...
    preload(
        '/public/images/stars.red.1.star.png',
        '/public/images/stars.red.2.star.png',
        '/public/images/stars.red.3.star.png',
        '/public/images/stars.red.4.star.png',
        '/public/images/stars.red.5.star.png',
        '/public/images/stars.empty.png'
    );
    ...
    $('.rating').on('mousemove', function(event){
        var x = event.pageX - this.offsetLeft;
        var id = getIdByCoord(x); //
        if ($(this).data('current-image') != id) {
            $(this).css('background-image', 'url(' + pics[id].src + ')');
            $(this).data('current-image', id);
        }
    })
    ...
})

...

// PRELOAD FUNCTION TO SET UP PICS ARRAY IN MEMORY USING IMAGE OBJECT
function preload() {
    for (i = 0; i < arguments.length; i++) {
        pics[i] = new Image();
        pics[i].src = arguments[i];
        // alert("preload " + arguments[i]);
    }
}

追伸おかげでショーン・アルトマン

1
web.developer

これはパーティーに遅れていますが、ほとんどのCSSフレームワークユーザー、Bootstrap、Foundation（その他）に問題があることを見ることができるため、驚くべき発見があります。ユーザーが下にスクロールし始めると、

このようなものがある場合（Bootstrapに組み込まれています）

.fade {
    opacity: 0;
    -webkit-transition: opacity .35s linear;
    -o-transition: opacity .35s linear;
    transition: opacity .35s linear;
}
.fade.in {
    opacity: 1;
}

または、を介していくつかの要素を表示しています

-webkit-transition: opacity .35s linear;
-o-transition: opacity .35s linear;
transition: opacity .35s linear;

または、js（animation.css、waypoints.js、velocity.js）を介して、スクロールダウン時にtransitionを使用して任意の種類の要素または要素クラスを追加しています
可能であれば、その要素から遷移/クラスを削除するか、その要素が表示されたときに再チェックして、途切れたChrome問題を修正します。

1
Benn

私の仕事は、視差効果のあるページを作成することでした。 CSSを使用してこれを修正しようと試みた後、次の解決策を思いつきました。

JavaScript：

var isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if (isChrome)
{

    var itemArr = $('.slider-title');

    $(window).scroll(function()
    {
        var pos = $(window).scrollTop();
        var wh = window.innerHeight;

        $(itemArr).each(function(i, item){

            var p = $(item).position();
            var h = $(item).height();
            if (p.top + h > pos && p.top < pos+wh)
            {
                // items ir redzams
                var prc = (p.top - pos +h)/wh ;
                //console.log(prc);
                $(item).css({'background-position':'center '+prc+'%'});
            }

        });
    });

}

CSS：

    /*only for webkit  browsers*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .slider-title{ 
        background-size:auto;
        background-position: center 0%;
    }
}

.slider-titleは、背景の添付が修正されたアイテムになります。

1
Eriks Klotins

位置が必要な場合の別の回避策：fixed/relative/absolute多分（私の場合のように）絶対に配置された要素があるために、ちらつきのdiv内にwrapper divを作成し、それに位置と背景プロパティを移動します。

例えば.

持っていた -

<div class="background-flickers' style="background:url('path-to-image'); position:relative">
 <absolutely positioned element>
</div>

可能な回避策

<div class="no-more-flicker!">
 <div class="wrapper" style="style="background:url('path-to-image'); position:relative">
  <absolutely positioned element>
 </div>
</div>

ちらつきはもうありませんが、ちらつきのバグは子コンテナに伝わらないようです。

0
Vishu

ほぼ5年後の更新...これはまだchromeの問題のようです。以下を追加することを含め、言及されたソリューションのほとんどを試しました。

transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);

st音の問題は修正されていません。 background-attachment: scrollを追加すると、サイトのUXに不可欠な視差効果がなくなります。親要素の追加に関する上記の解決策は、私にとっては何も変わりません。最近この問題を抱えている人々からの他のアイデアはありますか？フロントエンドでGatsby（React）を使用しています。

0
Dmitriy

Chrome要素にマークアップを追加した瞬間。そのような要素から背景を削除して、position：relativeを指定してください。要素内に、新しいdivを追加します。背景を必要として追加します。その中にマークアップを追加しないでください。

例：

現在：

<div class="container" style="background-image:url(example.jpg);background-position:center;background-attachment:fixed;background-size:cover;">
     <div class="example"></div>
</div>

修正済み：

 <div class="container" style="position:relative;">
     <div class="added-background" style="position:absolute;width:100%;height:100%;background-image:url(example.jpg);background-position:center;background-attachment:fixed;background-size:cover;">
     <div class="example"></div>
</div>

それが役に立てば幸い！

0
Tatubolitex

ポップアップウィンドウの下のオーバーレイdivでこの問題が発生しました（opera 20）でランダムに消えます-アニメーション化され、スクリプトによってアクティブ化されます）。

<div class="popupwrapper">
    <div id="popupdownload" class="popup">
        <h1>Test</h1>
    </div>
    <div class="popupoverlay"></div>
</div>

.popupwrapper {
display:            none;
z-index:            9100;
}
.popupwrapper.active {
display:            block;
}
.popupwrapper > div {
-webkit-transition: opacity 150ms ease-in-out, -webkit-transform 150ms ease-in-out;
-moz-transition:    opacity 150ms ease-in-out, -moz-transform 150ms ease-in-out;
-ie-transition: opacity 150ms ease-in-out, -ie-transform 150ms ease-in-out;
transition:         opacity 150ms ease-in-out, transform 150ms ease-in-out;
}
.popupoverlay {
position:           absolute;
top:                0;
right:              0;
bottom:             0;
left:               0;
width:              100%;
height:             100%;
background:         rgba(26,26,26,.9);
opacity:            0;
}
.popup {
position:           fixed;
top:                30%;
left:               40%;
padding:            48px;
background:         #e6e6e6;
z-index:            9101;
-webkit-transform:  scale(1.6);
transform:          scale(1.6);
opacity:            0;
}
.popupoverlay.active {
opacity:            1;
}
.popup.active {
-webkit-transform:  scale(1);
transform:          scale(1);
opacity:            1;
}

オーバーレイは絶対（.popupoverlay）に配置されましたが、どのような方法でも配置されなかったコンテナーに配置されました。オーバーレイの絶対位置を親（.popup）にコピーしましたが、正常に機能します。

.popupwrapper {
position:           absolute;
top:                0;
right:              0;
bottom:             0;
left:               0;
width:              100%;
height:             100%;
display:            none;
z-index:            9100;
}

問題は、親要素の配置が明らかでない場合にのみ現れると思います。

誰か助けてくれて嬉しい。よろしく

0
Przemysław Melnarowicz