web-dev-qa-db-ja.com

IEのみ、解決方法は？

IE11の奇妙な問題、マウスホイールまたはカーソルキーのみを使用すると、次のプロジェクトの固定背景がちらつく。これは確かにバグです。

ウェブサイト： http://gerbrandy.zitemedia.nl:88/

スクリプトを使用して背景のプロポーショナルサイズを変更しますが、スクロール時にサイズ変更イベントが発生しないため、これは問題ではありません。したがって、スクリプトの問題ではありません。それは固定された位置の要素と関係があります。このスクリプトは、他のすべてのブラウザで数年間問題なく動作します。

これを修正する方法がわかりません。いくつかのことを試しましたが、たとえばjavascriptを無効にする方法がわかりませんが、そうではないはずです。 Windows8.1でIE11を使用しています。

誰かがこれについて同じ経験をしていて、この問題を回避する方法を知っていますか？

javascriptcssinternet-explorercss-positionflicker
14
Codebeat

スクロール中に固定位置要素でIE 11ちらつき/途切れ/遅延が発生する原因は、次の3つです。

  1. 「オーバーフロー：自動」がある場合。親コンテナ要素で、それを削除します。

  2. Background-attachment：fixedを削除します。固定位置要素から。

  3. 固定位置要素からborder-radiusを削除します（mobile IEのみ）。

18
Adamy

私は同じ問題を抱えていました、それはあなたのコンピュータスペックが扱うにはページ内であまりにも多くのことが起こっているときに起こるバグのようです、私は次の変換コードを固定位置要素に追加することによってそれを修正することができました、 （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;
        width: 100%;
        left: 0;
        top: 0;
        z-index: 9994;
...other stuff and then
        /* MAGIC HAPPENS HERE */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }
13
Neo

Htmlのoverflowを設定することで、IE9、IE10、IE11、MEdge <= 20の灰色のちらつきを取り除くことができます。

html{
  overflow: hidden;
  height: 100%;    
}

body{
  overflow: auto;
  height: 100%;
}
7
TLbiz

どうやら「バグ」はWindows8.1のIE11にのみ影響するか、おそらく8.0にも影響します。 background-attachmend:fixedを削除するとうまくいきました。そのルールがないと、すべてのブラウザで背景画像が正しく表示されるため、明らかにそのルールは冗長でした。 2番目の解決策は、IE設定でスムーズスクロールを無効にすることですが、デフォルトのインストールで有効になっているため、これは最適ではありません。

ちらつきCSS：

#element_id{
    position:fixed;
    height:100%;
    left:0;
    bottom:0;
    right:0;
    background-image:url('path/to/jpg');
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center center;
    background-attachment:fixed;
}

...そして新しいコード（1行削除）：

#element_id{
    position:fixed;
    height:100%;
    left:0;
    bottom:0;
    right:0;
    background-image:url('path/to/jpg');
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center center;
}
5
mch

次のようなハードウェアアクセラレーション技術が私の原因でした。

outline: 1px solid transparent;

取り外してください。原因の可能性があります。

2
dewwwald

ちらつきのもう1つの理由は、明らかに、固定要素内の別の固定要素である可能性があります。少なくともそれが私の場合の理由でした。 Edgeの誤った動作はランダムに見えます。

0
webdesignwien

この動作は、Microsoftの「スムーズスクロール」機能のバグが原因です。 Win7以降のIE10および11で発生します。さらに別のMSバグを修正するために、完全に機能するコードを変更することはお勧めしません。代わりに、Internet Explorerの設定を開いて「機能」を無効にし、「詳細」に移動します。「ブラウジング」カテゴリで、「スムーズスクロールを使用する」を無効にする必要がある最後のオプションです。

0
FabianS