問題タブ [prefixfree]

divをアニメーション化しようとしています。アニメーションで実際に行っているのは、div を 100% に変換することです。ただし、アニメーションはクロムでのみ機能し、Firefox では機能しません。プレフィックスを追加しようとしましたが、prefix-free.js プラグインも含めました。Caniuse.com によると、Firefox はプレフィックスなしでアニメーションをサポートするとのことです。スタックオーバーフローで同様の質問をたくさん見ました。しかし、それらのほとんどは、Firefox などでまだサポートされていないプロパティを使用しています。しかし、私のものは非常に単純です。翻訳と背景色の変更を削除してみました。しかし、それも機能していません。

HTML:

CSS:

デモ

私が達成したいのは、私が書いた JavaScript ファイルによって処理される特定のスタイルシートをユーザーに定義させることです。指定されたスタイルシートを取得するために使用したコードは次のとおりです。

問題は、最初のページの読み込みですべてが正常に機能し、3 から 5 の後にtargetSheets返される空の値の配列を更新した後、その後に行われたすべてが明らかに台無しになり、別の時間を更新した後に期待値を取得することです。すべてのブラウザで試し、キャッシュをクリアしましたが、同じことが何度も起こります。コンソールに表示される画像は次のとおりです。

https://www.dropbox.com/s/ipnc20hcdr3d6wl/01.png?dl=0

すべてのブラウザーの最新バージョンで wamp サーバーを使用して、オンラインとローカルでコードをテストしました。では、この問題の原因は何ですか?どうすれば修正できますか?

御時間ありがとうございます。

編集

リンクノードを削除し、処理されたcssをスタイルタグに再挿入するプレフィックスフリープラグインを実装したため、答えが見つかりました。

内部で実行するコードを含む iframe を動的にロードしています。これは、その下に codemirror インスタンスがあるコードプレイグラウンドです。iframe 内で実行されるコードの 1 つにLea Verouの prefixfree.min.js があります。

iframe のロード/アンロード時に、次のエラーが発生します。

このエラーはどういう意味ですか?

私の最初の質問はここで答えられました: Google Fonts の提供: No 'Access-Control-Allow-Origin' header is present on the requested resource.

data-noprefix 属性を Google Fonts リンク タグに追加する方法はありますか?

私の functions.php は次のようになります。

ホバーしたときに回転アニメーションで画像を反転したい (以下のコードを参照)。画像にカーソルを合わせると、x 軸を中心に 1 秒間回転します (マウスが画像から離れると元に戻ります)。

アニメーションは、Firefox と Safari で期待どおりに機能します。ただし、Chrome ではアニメーションがスキップされ、画像が瞬時に反転することがあります。通常、アニメーションがスキップされる前に数回動作するため、問題を確実に再現する方法がわかりません。私はビデオを録画したので、私が何を意味するかを見ることができます: https://www.youtube.com/watch?v=bpgi46F_5RU

この CSS に何か問題がありますか? 最初は回転角度が原因かと思いましたが、他の種類のアニメーションでも同じ問題が発生します。

編集: TylerH のコメントによると、Chrome のバグのようです。David Walsh による有名なチュートリアルhttp://davidwalsh.name/css-flipにも同じ問題があります。ビデオ: https://www.youtube.com/watch?v=o_TViH4AmZ8 . 画像の下にある [Toggle Flip] ボタンが正常に機能するため、この問題はマウス操作に関連しているに違いありません。

画像フィルターで「プレフィックス フリー」( http://leaverou.github.io/prefixfree/ )を使用しようとしていますが、スクリプトが -webkit- プレフィックスを追加していないようです。

例を次に示します: http://codepen.io/barkins/pen/ByeGjd

「Prefix free」は「-webkit-」をスタイルに追加するべきではありませんか?したがって、次のようになります。

事前に助けてくれてありがとう。

Web ページを持っていますが、ブラウザーによって表示が異なります。私が与えたパディングとマージンの量でさえかなり外れているので、JS については話さないでおきましょう。ここにもライブがあります:
https://iam-shivam.github.io/DrumPad/drumpad.html

すべてのブラウザーで同じように表示されるようにするにはどうすればよいですか? これまたは手動のヒントを自動化する方法はありますか?
接頭辞なしのスクリプトも試してみましたが、うまくいかなかったようです。使い方が悪いのかな。リンクは次のとおりです。 http://leaverou.github.io/prefixfree/

HTML ファイル:

CSS ファイル: