簡単な質問: 私はこれclip-path maskを で動作させChromeで同じ効果を得るための簡単な方法を知りたいFirefoxです.

私はいくつかの調査を行い、それが でFirefox's clip-path動作することを見ましsvgたが、それが唯一の方法ですか? その場合、動的に変更する方法はmask？

HTML:

Javascript:

これがChromeでの作業です。

私は画像を表示しようとしていましたが、ホバーすると、ビデオが画像を置き換え始めました。ホバー機能にJavascriptを使用しました。

私はこのようにビデオタグで「ポスター」を使用してこれを行いました:`

ただし、ビデオを画像と同じサイズにしたいと思います。ビデオは 1280*720、画像は 677-611 です。ビデオを適応させるためにクリップパスを使用しようとしましたが、うまくいきません。これが私の CSS です:

このスタイルを .video、#videotest、およびソースに適用しようとしましたが、それでも期待どおりに動作しませんでした。

HTML5 の動画でクリップパスを使用することはできませんか? もしそうなら、どうすればそれを行うことができますか?そうでない場合、どうすればそれを機能させることができますか?

私はもう少し自分自身を説明します：画像のサイズを変更したくない、プロポーションを維持するかどうか、たとえば、左右のピクセルを切り取りたいだけなので、ポスターの画像はまったく同じサイズになりますそれを置き換えるビデオとして。Clip-path は私が探していたものに対応しているように見えましたが、動作させることができません。

ありがとう。

私はCSSclip-pathプロパティで遊んでいて、ロゴをアニメーション化するこのペンを作成しました: http://codepen.io/alexcoady/pen/PqJavW . このコードは、いくつかの div を描画し、clip-path生成したいくつかの三角形に基づいて動的にそれらに s を適用します。

これは、Chrome (43.0.2357.124 (64 ビット)) で期待どおりに機能します。

ただし、Safari (8.0.4 + iOS) では、何も表示されません。インスペクタを開いた後、clip-pathプロパティのチェックを外してから再度チェックすると、パスは期待どおりに表示されます。

Safariがこれらのパスを最初にレンダリングするようにするためにできることはありますか?

ありがとう。

レスポンシブ サイズの SVG clipPath を使用して、固定位置の div を画像の背景でマスクしています。Safariで失敗していると指摘されるまで、これはすべて正常に機能していました（Firefox、Chrome、IE、およびOpera）。clipPath数時間後、Safari が SVGを 3 つの div のうちの 1 つにしか適用していないことに気付きました。私はBingでそれをグーグルで検索し、この質問を見つけました。これは本質的に同じことですが、答えはありません。-webkit-transform:translateZ(1px)CSS ハードウェア アクセラレーション ( / )を強制するためのコメント-webkit-transform:translate3d(0, 0, 0)です。

私はそれをしました、そして捕虜！Safariでは完全に機能します...しかし、Chromeでは完全にめちゃくちゃに見えます。再描画が完全に狂ってしまったかのようです (上下にスクロールすると、Chrome での歪んだ途切れ途切れの効果が毎回異なります)。

問題は、Chrome と Safari の両方が WebKit ベースであることです。そのため、ベンダー プレフィックスはここでは役に立たないのではないでしょうか?

参考までに、次のように表示されます(FF のスクリーンショット、現在 Safari でも同じように見えます)。

CSS ハードウェア アクセラレーションを使用した Chrome では、次のように表示されます。

理想的には、a) Chrome でひどい再描画の問題を解決するか、b) clipPathSafari で複数の要素が機能しない場合の別の修正方法を見つける必要があります。

次の例のようなクリップ パス マスクを作成しようとしています: http://html.blahlab.com/tato/ しかし、次の問題があります: マスクはページの左上にあり、それはありません。例のように、リンクされた div を「フォロー」しないでください。

私のページは: http://mmazza.com/

SVGclipPathを使用して画像をクリップしています。( JSFiddle )

Chrome では、アニメーションが壊れています。クリップされた画像は、他の何かが変更された場合にのみ再レンダリングされます (たとえば、JSFiddle のボックス間の仕切りをドラッグする場合)。

SVGが変更されたときにChromeに画像を再レンダリングするように「強制」する方法はありclipPathますか?

HTML:

CSS:

私はこのインターフェースの概念を持っていますが、それが可能かどうかはわかりません。説明が難しいので、スケッチしてみました。

私はいくつかの行動を達成する方法を知っていると思います:

• <header>位置: 固定;
• <nav>position: sticky (ポリフィルあり)
• <section class="content box">--- まったくわからない

配置できるコンテンツ ボックスにクリップ パスを追加する何らかの方法があることを期待していました: 修正済み。そのため、ユーザーがスクロールすると、クリップ パスによって定義された領域からコンテンツ ボックスがのぞき見されます。

かなりのオプションを調べて、webkit-mask-attachment で解決策を見つけたと思ったのですが、そのプロパティは無効でした。

どんな助けでも大歓迎です。私は、レスポンシブに動作する必要がある純粋な CSS ソリューションを好みます。

乾杯、バート！

PS。<header>スクロール オフセットを監視し、高さとオーバーフローを設定するクラスを変更する JavaScript ソリューションを考えました。しかし、CSS ソリューションがあれば、私は本当にそれを好むでしょう。

更新 1

私は何かに取り組んでいます。position: sticky を使用していて、ポリフィルを気にしていないため、Firefox でのみ作業しています。スクロールすると機能します....しかし、下にスクロールして数秒待つと、何とか再配置または再描画され、赤いヘッダーが再び完全に表示されます。

なぜこれが起こるのか分かりますか？

Firefox でこのペンを試してみてください: http://codepen.io/anon/pen/GJBxYw