web-dev-qa-db-ja.com

変換のバグ：スケールとオーバーフロー：Chrome

CSS3プロパティの操作transform: scale、興味深い問題が見つかりました。写真に少しズーム効果を加えたかった。しかし、親divに使用したときはoverflow: hiddenおよびborder-radius、子divは親divを超えて拡張しました。

更新：

問題は解決しません。 transitionを追加しても、まだ機能しません。この問題を解決しようとしましたが、成功しませんでした。

demo

google-chrometransformtransitioncss3
55
Jake Blues

これはWebkitベースのブラウザーの既知のバグです。 ＃6236 を参照してください。 border:1px solid transparent;を.wrapクラスに追加して、問題を回避できます。

更新された要件では、border-radiusを持つ要素に遷移を追加します。これは、Chomre/Webkitのもう1つの既知のバグ ＃157218 です。一般的な回避策はまだありませんが、そのバグに関するコメントの1つでは、chrome://flagsを使用し、--ignore-gpu-blacklistフラグを使用すると、Chrome 29（ Chrome dev dev today）。

20
andyb

透明な境界線は私にとっては機能しませんでしたが、.wrap divのz-indexを変更して画像が機能しました（私の場合、画像は実際にはビデオです）

これがcssです。

.videoContainer{
    overflow: hidden;
    z-index: 10;
}

video{
    margin-left: -55%;
    transform: scale(-1,1);
    -webkit-transform: scale(-1,1);
    -moz-transform: scale(-1,1);
    z-index: 0;
}

注：z-indexを適切に機能させるために要素を配置する必要性に関する以下のJake Bluesのコメントを参照してください。

28
Ken

ラップ要素のtransform: translateZ(0);が私にとってはうまくいきました。

この手法の詳細については、 translateZ（0）に対するCSSのパフォーマンス を参照してください。

23
lefoy

この発行者を解決する両方の方法がうまくいきました：

  1. 次の行を親ラッパーに追加します（_z-index: 0_はイメージ自体には必要ありません）：_position: relative; z-index: 10_

  2. または、transform: translateZ(0);を親ラッパーに追加します（ブラウザのサポートを改善するために対応するプレフィックスを付けます）

17
Mike Shema

これは、合成レイヤーが親レイヤーによってクリップされないために発生します。そのため、時々_overflow:hidden_を持つ親を独自の合成レイヤーに持ってくる必要があるので、_overflow:hidden_を正しく適用できます。

そのため、変換された要素の親要素にCSSプロパティtransform: translateZ(0)を追加する必要があります。

_/* add to parent so it is composited on its own layer before rendering */
.parent-of-transformed-element {
     -webkit-transform:translateZ(0);
     transform:translateZ(0);
}
_

次に、変換された要素が、変換された子のような独自のレンダリングレイヤーに合成されるため、_overflow:hidden_が機能します。

最新のSafariおよびChrome iOSおよびiOS以外のデバイスでテスト済み

9
Jonathan Marzullo

奇妙なことに、Chrome 65にアップグレードし、will-change: transform; IFRAMEスタイルにトリックを行いました。

4
Yousef Salimpour

ソリューション です。

HTML：

<div class="wrap">
    <div class="image"></div>
</div>

CSS：

.wrap{
    width: 400px;
    height: 260px;
    overflow: hidden;
    border-radius: 15px;
    border:1px solid transparent;
}
div.image{
    background: url(http://blog.dothegreenthing.com/wp-content/uploads/2012/10/take-a-smile.jpg) no-repeat;
    width: 400px;
    height: 260px;


}
div.image:hover{
    -webkit-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
    cursor: pointer;
    border:1px solid transparent;
}

Chromeでは、ボックスを囲む透明なborderが必要です。お役に立てれば。

2
Nitesh

私の英語が下手でごめんなさい。

ページに配置された要素がない場合、コンテナ要素と子要素の両方のz-index属性を設定する必要はありません。

z-index：0（または他の）属性をコンテナ要素に追加するだけです。

.container {
    border-radius: .14rem;
    overflow: hidden;
    z-index: 0;
}
.child {

    }
1
bob blunt

Chrome 65の最新バージョンでも同様の問題が発生しました。div内のtransform：scale（）および最新のChromeバージョンでは、オーバーフローが発生した場合でも、側面がマスクされなくなり、親コンテナから飛び出していました。

TranslateZはある程度役に立ちましたが、親でtranslateXを使用したときのみ、代わりに幅を適切にマスクしました：

 transform:translateX(0);
1
dyad

私はこれを長い間続けてきましたが、私のために働いたのはこのrotate(0.1deg) translateZ(0)だけです。したがって、要素をスケーリングする場合

.something:hover img{

    -webkit-transform: scale(1.1) rotate(0.1deg) translateZ(0);
    -moz-transform: scale(1.1) rotate(0.1deg) translateZ(0);
    -o-transform: scale(1.1) rotate(0.1deg) translateZ(0);
    transform: scale(1.1) rotate(0.1deg) translateZ(0);

}

回転なしでは、修正は私の側では機能しません。

[〜＃〜] any [〜＃〜] img parent（画像がある場所でコンテナを回転させるなど）に変換を追加する場合、たとえば、要素に同じ修正を追加する必要があります

.something_parent{
    transform: translate(-9%,9%) rotate(0.1deg) translateZ(0);
    -webkit-transform: translate(-9%,9%) rotate(0.1deg) translateZ(0);
    -mos-transform: translate(-9%,9%) rotate(0.1deg) translateZ(0);
    -o-transform: translate(-9%,9%) rotate(0.1deg) translateZ(0);
}
0
Benn

このバグは、マスクがスケーリングされたときにWebkitブラウザー（SafariおよびChrome）に存在します。その後、上記のすべての回避策は機能しません。ただし、非標準のcssプロパティを使用して -webkit-mask-box-image は、スケーリングされたマスクにも役立ちます。

0
paul