Google Chrome は Flexbox ビューポートを使用して展開方向を固定します
<p>Google Chrome で、<code>スペース</code Expand/collapse> または <em>隣接</em> Flex アイテムを持つ Flexbox コンテナ内に要素を配置すると問題が発生します。 code>center</code> ビューポートに対してコンテンツをさまざまな方向に揃えます。 </p>
<p>Firefox、IE11、Edge、または Safari では、要素は常に下に展開されるため、これは問題になりません。 </p>
<p>興味があります:</p>
-
<li>Chrome は特定の仕様に従って動作しますか?もしそうなら、どれですか? </li>
<li>そうでない場合、なぜ Chrome でそれを行うのでしょうか? (私見ですが、画面外にランダムに消えるトリガーをクリックするのはひどいユーザー エクスペリエンスです。) </li>
<li>何らかの方法で Chrome の動作を変更または無効にすることはできますか?例えば。 CSS またはメタタグ経由ですか? </li>
</ul>
<p><strong>更新 1: 可能であれば、Chromium 開発者からの洞察/説明を求めるために、Chrome バグ トラッカーに問題 #739860 を送信しました。 </strong></p>
<時間>
<p>2 つの例を以下に挿入します。問題を説明する完全なテスト スイートは、このペンで見つけることができます: https://codepen.io/jameswilson/full/xrpRPg/ この例では、展開/折り畳みの動きがアニメーション化されて目を引くように、 SlipToggle を使用することにしました。同じ動作が詳細タブでも発生しますが、クロスブラウザーはまだサポートされておらず、展開/折りたたみがあまりにも不安定です。</p>
<p><strong>例 1:Chrome 针对齐 Flexbox 間の空格の展示/折叠行は</strong></p>
<p>
<pre class="brush:js;toolbar:false;">$('button').click(function() {
$(this).next().slideToggle();
})</pre>
<pre class="brush:css;toolbar:false;">body {
マージン: 30px;
フォントファミリー: サンセリフ;
}
それはさておき、
ディビジョンはさておき、
まとめ、
主要、
ボタン、
詳細ページ、
ボタンP {
背景: rgba(0,0,0,.09);
境界線: なし。
パディング: 20px;
マージン: 0;
}
.flexcontainer {
ディスプレイ: フレックス;
}
脇に{
フレックス: 1;
位置: 相対的;
最大幅: 25%;
背景: ミントクリーム。
ディスプレイ: フレックス;
フレックス方向: 列;
位置: 相対的;
}
脇に.スペース{
コンテンツの位置揃え: 間のスペース;
}
余談.センター {
コンテンツの位置揃え: 中央;
}
主要 {
フレックス: 3;
位置: 相対的;
最大幅: 75%;
背景: アリスブルー;
垂直配置: 上;
高さ: 100%;
}
メイン > * * {
マージントップ: 20px;
}
ボタンP {
表示: なし。
}</pre>
<pre class="brush:html;toolbar:false;"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> ;</スクリプト>
<セクションクラス="フレックスコンテナ">
<aside class="space-between">
<div>上部サイドバー</div>
<div>下部サイドバー</div>
</余談>
<メイン>
<div>
<button>slideToggle</button>
<p>その他のブラウザ: 常に下に展開されます。<br>
Chrome: トップサイドバーは常に表示されるため、常に下に展開する必要があります。</p>
</div>
<div>
<button>slideToggle (通常は下に展開します)</button>
<p>その他のブラウザ: 常に下に展開されます。<br>
Chrome: 下部サイドバーと上部サイドバーの両方が表示されている間、下に展開する必要があります。ただし、トップサイドバーが画面外になるまで下にスクロールすると、上に拡大されます。</p>
</div>
<div>
<button>slideToggle (通常は下に展開します)</button>
<p>その他のブラウザ: 常に下に展開されます。<br>
Chrome: 下部サイドバーと上部サイドバーの両方が表示されている間、下に展開する必要があります。ただし、トップサイドバーが画面外になるまで下にスクロールすると、上に拡大されます。</p>
</div>
</メイン>
</section></pre>
</p>
<p><strong>例 2:Chrome 对居中对齐の Flexbox の展示/折叠行は</strong></p>
<p>
<pre class="brush:js;toolbar:false;">$('button').click(function() {
$(this).next().slideToggle();
})</pre>
<pre class="brush:css;toolbar:false;">body {
マージン: 30px;
フォントファミリー: サンセリフ;
}
それはさておき、
ディビジョンはさておき、
まとめ、
主要、
ボタン、
詳細ページ、
ボタンP {
背景: rgba(0,0,0,.09);
境界線: なし。
パディング: 20px;
マージン: 0;
}
.flexcontainer {
ディスプレイ: フレックス;
}
脇に{
フレックス: 1;
位置: 相対的;
最大幅: 25%;
背景: ミントクリーム。
ディスプレイ: フレックス;
フレックス方向: 列;
位置: 相対的;
}
脇に.スペース{
コンテンツの位置揃え: 間のスペース;
}
余談.センター {
コンテンツの位置揃え: 中央;
}
主要 {
フレックス: 3;
位置: 相対的;
最大幅: 75%;
背景: アリスブルー;
垂直配置: 上;
高さ: 100%;
}
メイン > * * {
マージントップ: 20px;
}
ボタンP {
表示: なし。
}</pre>
<pre class="brush:html;toolbar:false;"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> ;</スクリプト>
<セクションクラス="フレックスコンテナ">
<aside class="center">
<div>中央サイドバー</div>
</余談>
<メイン>
<div>
<button>slideToggle (通常は下に展開します)</button>
<p>その他のブラウザ: 常に下に展開されます。<br>
クロム：通常は下に展開します。コンテナの上端がビューポートからスクロールアウトすると、両方向に展開されます。</p>
</div>
<div>
<button>slideToggle</button>
<p>その他のブラウザ: 常に下に展開されます。<br>
クロム：通常は下に展開します。コンテナの上端がビューポートからスクロールアウトすると、両方向に展開されます。</p>
</div>
<div>
<button>slideToggle (通常は下に展開します)</button>
<p>その他のブラウザ: 常に下に展開されます。<br>
クロム：通常は下に展開します。コンテナの上端がビューポートの外にスクロールすると両方向に拡大しますが、中央のサイドバーがスクロールしてビューポートの外に出ると再び下方向に拡大を再開します。</p>
</div>
</メイン>
</section></pre>
</p>
