margin: 0 autoを使用して中心のdivレイヤを持ち、width: 1000pxの固定幅を持っています。スクロールを開始するとwidth: 100%になり、見栄えが良くなります。クロムのCSS揺らぎ/ジッタのバグ？中心のdivの幅の移動
問題は、移行中に一部のコンテンツが揺れ始めてジッタが入ることです。たとえば、画像が揺れ、H1のテキストが表示されないため、コンテンツの一部を言う これはChromeとEdgeでのみ発生します。 （Windows 10でテスト済み）。
いくつかの調査を行ったところ、Chromeでハードウェアアクセラレーションを使用していないときにトランジションが発生し、ちらつきが発生していたことが判明しました。私が理解していることから、これは2年以上前にGoogleによって解決されました。
ハードウェアアクセラレーションをトリガーしようとしましたが、何も効果がありませんでした。
このジッタ/シェーピングの問題は、divレイヤーがmargin: 0 autoで固定幅でセンタリングされ、その要素がwidth: 100%に移行した場合にのみ発生します。
JSFiddleの内部でデモコードを再作成すると、私のシステムでいつも再現できないような奇妙な問題があります。ここで
はJSFiddleです：https://jsfiddle.net/aobrien/vc4n8ecy/
ただ、下にスクロールし、クロムのロゴが揺れる様子がわかり。画面のサイズに応じて、上下にスクロールして気がついたかもしれません。
注：これは、画面の幅が約1700px以上の場合にのみ表示されるため、ブラウザが全幅になっていることを確認してください。ブラウザウィンドウを80％に拡大すると、問題が発生します。
//jQuery to add sticky class when scrolling
$(window).scroll(function() {
if ($(this).scrollTop() > 1) {
$('.header').addClass("sticky");
} else {
$('.header').removeClass("sticky");
}
});body {
height: 2000px;
}
.header {
background: #335C7D;
margin: 0 auto;
width: 1000px;
transition: width .6s ease;
height: 200px;
}
.sticky {
position: fixed;
width: 100%;
left: 0;
right: 0;
will-change: width;
}
.wrap {
width: 1000px;
margin: 0 auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="header">
<div class="wrap">
<img src="https://i.stack.imgur.com/iaYsc.png" />
<h1> Hello World.</h1>
</div>
</div>
</div>これは、移行に全幅スティッキーメニューを達成するのは非常に簡単で、まっすぐ進む方法であると思われます。
幅の変更とともにmargin: 0 autoを使用すると、中心のdivレイヤーを再計算する際に問題が発生する可能性がありますか？
これまでのところ、これを解決するか、回避策を見つけるすべての試みが失敗しました。
ダウン投票のおかげでは、クロムと合法的なCSSのバグだし、誰もがどこでもそれを言及しているようだしない、あるいは回避策を見つけました。 –
時には私は理由がないと投票した人を顔で殴っていることがあります。これはまだ報告されていないchrome/cssの本当のバグであり、インターネット上のゼロ人はそれについて話しています。回避策を見つけるのを助ける代わりに、人々はただdownvote。ここでコミュニティを愛してください。 –