19

CSS3を使用した素敵なスタートレックレッドアラートアニメーションがあります。私の親要素の1つにとがborder-radius付いoverflow:hiddenているので、コンテンツは境界線の半径の形にトリミングされます。

これはすべてFirefoxで正常に機能しますが、Webkitブラウザーでは、一部の子要素がトリミングされた領域の外側にぶら下がっています。

これが私のコードです：

http://jsfiddle.net/doublewombat/EqK6R/embedded/result/

divクラス名のcurvedEdgesあるには、とがborder-radiusありoverflow:hiddenます。ただし、「アラート」テキストの左右のブロックは、の子要素であっても、この半径の外側にぶら下がっていますcurvedEdges。または、平易な英語では、アニメーションの左端と右端は、真っ直ぐではなく、わずかに湾曲している必要があります（Firefoxの場合のように）。

それで、これはWebkitのバグですか、それとも何か問題がありますか？

Webkitブラウザが手元にない場合はYouTubeにあります...

http://www.youtube.com/watch?v=3vyVy21nWsE

4

8 に答える 8

33

まず、なんてクールなデモでしょう。

私は周りを見回しました、そしてそれはあなたが持っているのではない問題のようです。他の誰かの問題に対する2番目の答えは、私にとってはそれを修正しましたが、これはサファリでは機能しません。修正はマスキングを使用することです：

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

その同じ質問に対する受け入れられた答えには別の修正があり、それは本当にあなたを助けることができると思いますが、要素と境界半径の正しい組み合わせを得ることができなかったようです。

于 2012-04-25T11:44:13.570 に答える
17

私は同じことをしようとしていて、border-radiusを使用して要素を円にマスクしていました。

マスキングと放射状グラデーションを使用して、Safari 6.0.3で目的の効果を実現することができました（位置とサイズの遷移を使用）。

コンテナ（マスキング）要素に追加した1行のコードは次のとおりです。

-webkit-mask-image: -webkit-radial-gradient(circle, white, black);

ハードエッジを取得するには、次のようにハードカラーストップを使用する必要があると思いました。

-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);

ただし、それがなくても同じように機能します（おそらく誰かが理由を教えてくれます）。クリッピングはborder-radiusの場合ほどスムーズではありませんが、予想外に境界を超えて画像の全体を打ち負かします。

古いバージョンのSafari/Chromeなどで使用するためにこれを調整する必要があるかもしれません。私は別のバージョン（別名YMMV）でテストしていません。

于 2013-04-19T16:47:03.717 に答える
16

https://code.google.com/p/chromium/issues/detail?id=157218で報告されているように、ブラウザの問題のようです。

基本的に、要素にアニメーションを適用すると、パフォーマンス上の理由からブラウザがGPU（グラフィックスプロセッシングユニット）で処理し、残りはCPUによって処理されます。これで、アニメーションがマスクの上にレンダリングされます。

回避策として、知覚できないプロパティを追加してみることができtransformます。これにより、マスク要素のGPU処理もトリガーされ、アニメーションの同じレベルにプロモートされます。

#redAlert .curvedEdge {
    -webkit-transform: rotate(0.000001deg);
}

ブラウザのバージョンによって異なる可能性があると思いますが、これらの他の値もGPU処理をトリガーすることが報告されています：rotate(0)、translateZ(0)

于 2013-08-06T13:43:37.507 に答える
9

GPU/ハードウェアの合成に問題があるようです。transform: translateZ(0);問題も修正する必要があります。詳細については、http：//aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/を参照してください。

-webkit-transform: translateZ(0);
transform: translateZ(0);

ベンダープレフィックスを含めましたが、必要に応じて削除できます。

于 2014-03-11T14:44:11.287 に答える
4

混合作業の修正のようです：

.wrap {
    -webkit-transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}

http://jsfiddle.net/qWdf6/82/

于 2014-05-19T10:30:37.197 に答える
2

境界線の半径と太い黒の境界線を使用して、絶対位置のdivをその上に配置できます。これにより、非表示にしたい部分がブロックされます。

FF3.6の同様の問題に関する別の質問のデモを作成しました：http：//jsfiddle.net/vfp3v/15/

ボーダー半径; オーバーフロー：非表示、テキストはクリップされません

于 2012-04-25T11:42:36.843 に答える
1

CSS3クリップパスを使用してこのバグの別の可能な解決策を見つけましたが、これは最近のバージョンのWebkitでのみ機能します（Chrome 24では機能するようですが、Safari 6.0.2では機能しないようです）。以下は、要素の周りの円をクリップします。

-webkit-clip-path: circle(50%, 50%, 100%);

うまくいけば、これはすぐにもっと多くのブラウザによって実装されるでしょう！この機能には多くの優れたアプリケーションが含まれているようです。関連するブログ投稿は次のとおりです：http：//blog.romanliutikov.com/coding/css-clip-path-landed-in-webkit/。

于 2013-02-06T21:01:31.580 に答える
1

ヘッドアップと同じように、この修正は、境界線の半径はあるが境界線がないコンテナにマスクを適用した場合にのみ機能しました。最終的に私は次のようなものになりました：

<div style="border-radius: 15px; border: 1px solid red;">
    <div style="border-radius: 15px; overflow: hidden; -webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);">
        <span style="position: relative; left; -20px;">Some stuff that overflows.</span>
    </div>
</div>

内側のdivに境界線があるため、クリッピングは完全ではありませんでした。

完全に奇妙です。

于 2012-10-10T16:05:34.197 に答える