web-dev-qa-db-ja.com

Chromeで要素が消えるのを修正

作成したWebサイトをスクロールするとき、CSSプロパティposition: fixedを使用すると、ナビゲーションバーがページの最上部に維持されるように機能します。

ただし、Chromeでは、ナビゲーションバーのリンクを使用すると、時々が消えます。通常、クリックしたアイテムは常に表示されますが、常に表示されるわけではありません。時々全体が消えます。マウスを動かすと要素の一部が戻り、スクロールホイールまたは矢印キーで1回クリックするだけで要素が戻ります。 http://nikeplusphp.org で（断続的に）発生しているのを確認できます-発生するのを確認するには、リンクのナビゲーションを数回クリックする必要があります。

また、z-indexと可視性/表示タイプを試してみましたが、運はありませんでした。

この質問 に出くわしましたが、修正はまったく機能しませんでした。 IEであり、Firefoxは問題なく動作します。

これは既知の問題ですか、または固定要素を表示したままにする修正がありますか？

更新：

top: 0;を持つエフェクト要素のみ、bottom: 0;を試しましたが、期待どおりに機能します。

csswebkitposition
69
cchana

これはまだ解決されていないWebkitの問題で、奇妙なことに# url値を使用するのではなく、JavaScriptでジャンプしても問題は発生しません。この問題を克服するために、アンカー値を取得し、そのIDを持つ要素の絶対位置を見つけてそこにジャンプするJavaScriptバージョンを提供しました。

var elements = document.getElementsByTagName('a');
for(var i = 1; i < elements.length; i++) {
    elements[i].onclick = function() {
        var hash = this.hash.substr(1),
            elementTop = document.getElementById(hash).offsetTop;
        window.scrollTo(0, elementTop + 125);
        window.location.hash = '';
        return false;
    }
}

これをさらに改良して、aタグではなく、#で始まるリンクのみを検索するようにすることができます。

2
cchana

-webkit-transform: translateZ(0)をposition: fixed要素に追加します。これにより、Chrome=はハードウェアアクセラレーションを使用して、固定要素を連続的にペイントし、この奇妙な動作を回避します。

Chromeこのバグを作成しました https://bugs.chromium.org/p/chromium/issues/detail?id=288747 。注目を集めることができます。

195
TJ VanToll

これは私のためにそれを修正します：

html, body {height:100%;overflow:auto}
44
Cooper

私は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;
    background: white;
    border-bottom: 2px solid #eaeaea;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 9994;
    height: 80px;
    /* MAGIC HAPPENS HERE */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
18
Neo

上記のオプションは、提供された2つのソリューションを混合するまで機能しませんでした。

固定要素に次を追加することで、機能しました。基本的にz-indexも必要でした：

-webkit-transform: translateZ(0);
z-index: 1000;
7
cortopy

追加しても機能しない場合

-webkit-transform：translateZ（0）

また追加するより

user-scalable = no

ビューポートメタ上

ソース ここ

それは私のために働いた

2
GentiElezaj

別のケースで同じ問題が発生しました。これは、複数の場所で同じIDを使用したためです。たとえば、＃full 2 divを使用しました。

MozillaとI.E.複数のケースで同じIDの使用をサポートします。しかし、chrome does。私の場合、それは固定要素の消失に反応しました。

IDを削除するだけで問題は解決しました。

1
Ritesh Jung Thapa

Javascript経由でモーダルを呼び出すことを除いて、それらのどれも私のために働いた

<a href="#\" onclick="show_modal();">Click me to open MyModal</a>
<script>
function show_modal()
{
  MyModal.style.display = 'block';
}
</script>

これ以外は、上記の解決策のいずれも私の問題を解決しませんでした。

1
maslan

上記のいずれもまったく機能しない場合はどうなりますか？スティッキーヘッダーのシンプルなケース+コンテンツをプッシュするモバイルサイドメニュー。

固定要素（スティッキーヘッダー）が翻訳されるのを避ける方法を見つけようとしますが、この場合、良い代替手段はありません。

そのため、スコープの回避策はこれまでのところないので、固定要素の絶対位置を再計算するために選択したJSの代替があります。こちらをご覧ください： https://stackoverflow.com/a/21487975/2012407

0
antoni

これは私のために働いた。 Overflowプロパティを最上位のコンテナに追加します。これは、DivやFormなどになります。

div, form
{
  overflow:visible;    
}
0
kumar chandraketu

上記の回答のどれもうまくいかなかった場合、あなたが私のようなダミーではなく、固定要素にoverflow：hidden;が設定されていることを確認してください：

0
Angelika Johansson