web-dev-qa-db-ja.com

CSS3変換を使用した後のオーバーフロー動作

demo を確認してください

2つのdivがあり、最初のdivはスクロールバーを表示するために使用され、2番目のdivはdivの内部コンテンツの回転に使用されます。

私の質問は、内部のコンテンツがオーバーフローしていなくてもスクロールバーが表示される理由です。

デモをチェックして、ここで私が間違っていることと、この問題を克服する方法またはこれを達成するための代替方法を教えてください。

[〜＃〜] html [〜＃〜]

<div style="width: 1096px; height: 434px; overflow: auto; position: relative; border:solid 5px #555555">
    <div id="RotationDiv">
        <img style="left: 54px; top: 337px; width: 326px; height: 422px; position: absolute;" src="http://fc01.deviantart.net/fs70/f/2012/304/6/b/walfas_custom___vending_machine_2_by_grayfox5000-d5jljhe.png" />
    </div>
</div>

[〜＃〜] css [〜＃〜]

#RotationDiv {
    -ms-transform-Origin: 539px 539px;
    -webkit-transform-Origin: 539px 539px;
    width: 434px;
    height: 1096px;
    overflow: visible;
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    background-color:Red;
}
htmlcss3css-transformscss
19
Siddiqui

transform を使用しているため、要素の視覚的なフォーマットモデルを変更します。

[〜＃〜] mdn [〜＃〜] から：

CSS変換プロパティを使用すると、CSSビジュアルフォーマットモデルの座標空間を変更できます。これを使用すると、設定された値に応じて要素を平行移動、回転、拡大縮小、および傾斜させることができます。

[〜＃〜] mdn [〜＃〜] からの行：

座標空間を変更することにより、CSS変換は、通常のドキュメントフローを中断することなく、影響を受けるコンテンツの位置と形状を変更します。このガイドでは、変換の使用の概要を説明します。

W3C から：2モジュールの相互作用

このモジュールは、これらのプロパティが適用される要素の視覚的なレンダリングに影響するCSSプロパティのセットを定義します。これらの効果は、[CSS21]の ビジュアルフォーマットモデル に従って要素のサイズと位置が決定された後に適用されます。これらのプロパティの値によっては、 包含ブロック の作成、および/または スタッキングコンテキスト の作成が行われます。

したがって、以下のディメンションを持つ親要素があります。

width: 1096px; 
height: 434px;

今、あなたはを使用してその要素を変換しています

-webkit-transform: rotate(90deg);

そのため、ここでは、要素は視覚的に変換されますが、文字通りではありません。つまり、要素を変換しても、静的要素が取るようにドキュメント上のスペースを物理的に占有します。より良い方法であなたを理解させる図を共有します。

enter image description here

したがって、要素をこのように変換しましたが、変換された要素のheightが原因で垂直方向のスペースが使用されましたが、視覚的には変換されましたが、文字通りではありません...

enter image description here

だから、今、解決策は何ですか？子要素でposition: absolute;を使用し、とにかく親でposition: relative;を使用しています。

Demo

#RotationDiv {
    -ms-transform-Origin: 539px 539px;
    -webkit-transform-Origin: 539px 539px;
    width: 434px;
    height: 1096px;
    position: absolute;
    overflow: visible;
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    background-color:Red;
}

テストケースを持って、私は以下のようなスタイルを持っています

.parent .transformed {
    height: 200px;
    width: 200px;
    background: #f00;
    -moz-transform: rotate(120deg);
    -webkit-transform: rotate(120deg);
    transform: rotate(120deg);
    -moz-transform-Origin: 300px 300px;
    -webkit-transform-Origin: 300px 300px;
    transform-Origin: 300px 300px;
}

.parent .static {
    background: #00f;
    height: 200px;
    width: 200px;
}

テストケース

ここでは、.transformedのclassを持つ要素を変換しています。そのため、要素はtransformを実行し、Originも変更していますが、次のボックスは上に移動しません、変換された要素はフローのリテラルスペースを占有するため、position: absolute;のようにフローから抜け出すことはできませんが、それは別の概念です。

enter image description here

したがって、position: absolute;を使用する必要があります。そうしないと、divが垂直方向にスペースを占有するため、スクロールバーが表示されます...

Poopy IE互換性のあるソリューション

あなたがコメントしたように、はい、IEはまだabsoluteが配置されている要素が同じ次元にまだ存在するので、スクロールバーを表示します。

  • まず、要素を変換して親コンテナに設定します。また、overflowは必要ないので、最初の質問は、overflowを使用する理由よりも、autoを使用する必要がある場合です$ var] _？ hiddenを使用できます。

  • 親にhiddenではなく、変換された要素の下にコンテンツを配置することを楽しみにしている場合、同じサイズをoverflow: hidden;に設定して別の要素内に変換された要素をラップすることをお勧めしますposition: absolute;プロパティをこのブロックに移動します。 - デモ

  • それでも幸せではない場合は？では、なぜtransform要素全体なのでしょうか？ transform関連画像のみ- Demo

47
Mr. Alien

これは、まだ垂直プロパティを使用しているためです（hmore009がコメントで述べたように）。

ここを見てみると、それが何をしているのかを見ることができますので、これは本当です。

例1：

したがって、コンテナの高さと幅は次のとおりです。

width: 1096px;
height: 434px;

これで正しいことを行い、それらを変換#RotationDivに交換しました：

width: 434px;
height: 1096px;

コンテナをoverflow: hidden;に変更する場合、これはうまく機能します。これは、余分な高さを表示できないことを意味します。

DEMO HERE

例2：

しかし、おそらくオーバーフローの原因がわからないために、何らかの理由でそれをしたくないと思います。それでは、何が起こっているかを詳しく見てみましょう。

#RotationDivから高さを削除すると、オーバーフローはなくなります。それは少し有線ではないですか？いいえ、高さは変換と垂直の高さの両方に使用されていました。

DEMO HERE

では、これが原因の高さをどのようにして知ることができますか？

#RotationDivにコンテナと同じ高さを指定すると、オーバーフローがないことがわかります。

DEMO HERE

1pxをその高さに追加すると、オーバーフローが発生します。うーん、高さが原因であるに違いありません。コンテナの垂直方向の高さにまだ高さが使用されているように見えます。

DEMO HERE

どうすれば修正できますか？

コンテナにoverflow: hidden;を指定するか、それを完全に削除するという1つのオプションを見てきました。これにより、コンテナ内のスクロールが停止します。

DEMO HERE

または、画像エディタ（無料のオンラインエディタがあります）を入手して、そのような画像を反転することもできます。この方法でそれを行うことで多くの問題を節約できます。

それ以外の場合は、#RotationDivのみを削除して、コンテナbackground: red;を指定するだけで画像を反転できます。

DEMO HERE

トランスフォームを使用してそれを行う方法：

overflow: auto;を外し、不要なdivを削除し、imgに変換を設定します。

どうやってやりたいかはあなた次第です。多くの方法があります。私が言う最良の方法は、変換を使用せず、画像エディター（Photoshopなど）を使用して画像を反転するだけです。

DEMO HERE

5
Ruddy

まあ私もオーバーフローを引き起こす問題を抱えていた

私の問題は水平スケーリングが水平オーバーフローを引き起こしたことでしたので、私は水平スケーリングを垂直スケーリングに変更するだけで問題を解決しました（または問題tbhをバイパスしました）

このバグに対する私の理解は、共通の解決策がないため、回避することです。

0
FelixWang