Firefoxのサイズ変更の遅延がjavascript/jqueryである

Question

最近、私はfirefox（最新56.0.2）で苦労していますが、これはサブピクセルレンダリングでは寛容ではないようです（小数画素を独自の方法で管理しているようです）。

たとえば、7つのタブが含まれているdivに浮かんでいて、これらのタブに「containerDiv/7」ピクセルの幅を適用すると、Chrome、Safari、Operaでシームレスに動作します（私がテストしたもの）、これらのタブは横に並んでいますが、Firefoxでは、ウィンドウのサイズを変更すると、最後のタブがちらつき、上下に移動します。サイズ変更が終了すると、ピクセルの値を四捨五入した方法に応じて、並べ替えが行われるかどうかが決まります。

私はいくつかの調査を行いました。画面上のピクセルを管理する場合と同じように、すべてのブラウザが小数点を処理しないように見えます。

もちろん、これはCSSとパーセントで処理することができますが、一部の要素に罫線があり、他の要素に罫線がない場合は難しくなります。

だから、私はこの問題を回避するために、小さなjqueryのスクリプトテスト：もちろん

function testWidth(){ 
    var containingDivWidth= $('#containingDiv').width(); 
    var numBorders = 6; 
    var numItems = 7; 
    var totalWidth = containingDivWidth - numBorders;  
    var itemWidth = (Math.round(totalWidth/numItems))  
    var remainder = totalWidth - (itemWidth*numItems); 

    $('.tab').css('width',itemWidth+'px'); 
    $('.tab:nth-child(7)').css('width',itemWidth+remainder+'px'); 
}; 

$(document).ready(function()  {testWidth();}); 
window.onresize = function(event) {testWidth();}; 

を、これは最適ではないが、読みやすいです。ここで

はhtmlです、念のためにここで

<div id="containingDiv"> 
    <div class="tab"></div> 
    <div class="tab"></div> 
    <div class="tab"></div> 
    <div class="tab"></div> 
    <div class="tab"></div> 
    <div class="tab"></div> 
    <div class="tab"></div> 
</div> 

はCSSので

<style> 
    #containingDiv{ 
     width:100%; 
     height:40px; 
     background:red; 
    } 
    .tab{ 
     float:left; 
     height:40px; 
     border-right:1px solid black; 
     background:green; 
    } 
    .tab:nth-child(7){ 
     border-right:none; 
    } 
</style> 

です、はい、今ではすべてのブラウザで動作し、Firefoxが含まれています。 ...ウィンドウのサイズが変更されないとき。

ウィンドウのサイズが変更された場合、サイズ変更時に最後のタブが上下に点滅するため、Firefoxは前と同じように動作し続けます。

ただし、1つの違いがあります。サイズ変更の最後に、タブが並べられます。 サイズを変更しても、リアルタイムでチェックしたところ、すべてのタブの幅の合計はいつでもコンテナdivの幅と同じになりました。

Firefoxでは、リサイズ時にタブの幅を再計算するまでに数秒かかっているようです。

この仮定は、問題がウィンドウを水平方向にサイズ変更したときに表示されるだけで表示されるという事実によってバックアップされます。 これは、サイズ変更時にタブの合計が、計算が完了するまで、数分の1秒間、包含divよりも大きいことを示しているようです。 明らかに、サイズを変更すると、divを含む部分が常に大きくなるため、問題は発生しません。 これは私にとって待ち時間/遅延の問題のようです。

とにかく、私は正方形に戻っています。 サイズ変更中にサブピクセルレンダリングが機能しなくなり、再計算が遅れているように見えます。これらの両方が、Firefox（Chrome、Safari、MacのOperaなど）でのみ有効です。

どうすればよいですか？

注1：これはテーブルを使用できますが、この例は、テーブルで処理できないこの種の計算が必要な場合に複数のインスタンスが存在するためです。 Firefoxでこの問題が発生したのは初めてです。 これは、明らかなコンテキストで問題を解決するための単なる例です。 したがって、この例の表のような回避策は特に役に立ちません。

注2：サブピクセルレンダリングの問題を解決する方法がある場合は、小数点でピクセルを取得しないようにする関数を作成する代わりに、時間がかかります他のブラウザに（たとえ "サイズ変更時"の待ち時間の問題が私に迷惑をかけても）。さらに、このような関数では、タブの1つは常に他のタブよりも大きくまたは狭くなります。これは解決策としてエレガントではありません。

ありがとうございます！

Answer 1

すべてのCSS JavaScriptソリューションでは、コンテナにdisplay: flex、コンテナの子にはflex: 1 1 autoを設定してみてください。これにより、Firefoxで表示されているジッタが発生しないようにする必要があります。

設定するflex: 1 1 autoフレックスボックスは、フレックス行の各子の間に自動的に幅を分配します。

フレックスボックスについては、this guideをご覧ください。

#containingDiv{ 
 
     width:100%; 
 
     height:40px; 
 
     background:red; 
 
     display: flex; 
 
    } 
 
    .tab{ 
 
     flex: 1 1 auto; 
 
     height:40px; 
 
     border-right:1px solid black; 
 
     background:green; 
 
    } 
 
    .tab:nth-child(7){ 
 
     border-right:none; 
 
    }

<div id="containingDiv"> 
 
    <div class="tab"></div> 
 
    <div class="tab"></div> 
 
    <div class="tab"></div> 
 
    <div class="tab"></div> 
 
    <div class="tab"></div> 
 
    <div class="tab"></div> 
 
    <div class="tab"></div> 
 
</div>