1

ライブラリFlipClock.jsを使用して、CSS の「カード フリップ効果」のバージョンを使用するアナログ スタイルの時計を作成しています。残念ながら、プロジェクトを構築して初めて、Internet Explorer 9 以前に影響を与える長期にわたるバグに気付きました。

https://github.com/objectivehtml/FlipClock/issues/7

IE9 以前では、時計の時間が 1 秒遅れ (つまり、アニメーションの最初の 1 秒間は何も変化しません)、時計の数字も値 1 だけオフセットされます。私の期待は CSS フリップではありません。アニメーションは機能しますが、数字が現在のように即座に変化するのは正しいことだけです。

しばらくトラブルシューティングを行ってきましたが、まだ解決策を見つけていないか、問題を特定していません。これはスクリプト関連のバグではないと思います。HTML では数字が正しく変更されているのではないかと思いますが (IE の開発者ツールで確認するのは難しい)、IE9 の貧弱な CSS3 サポートを考慮せずに記述された 1 つまたは複数の CSS ルールが原因で、意図したとおりに表示されていないだけだと思われます。私は、それを修正するだけの CSS プロパティを 1 つまたは 2 つ見つけることを期待しています (または少なくとも望んでいます)。

ライブラリは、同じ問題を示す概念実証に基づいています。

http://codepen.io/ademilter/pen/czIGo

シンプルに保つためにそこでトラブルシューティングを行っており、修正が見つかった場合は、FlipClock.js ライブラリにプル リクエストを送信します。

どんな助けでも大歓迎です！

4

2 に答える 2

1

CSS アニメーションと影を削除した後、 を変更するz-indexとうまくいく場合があります ( http://codepen.io/cbuckley/pen/rysjali.beforeを参照)。

body.play ul li.before {
    z-index: 1;  /* was previously 3 */
}

したがってz-index: 1、デフォルトで使用してから、JavaScript で CSS アニメーションの機能検出を行い、body クラス (たとえばbody.supports-animation) を追加できます。次に、関連する CSS は次のようになります。

body.play ul li.before {
    z-index: 1;
}

body.play.supports-animation ul li.before {
    z-index: 3;
}

/* Prefix animation/background declarations with body.supports-animation too */

警告: FlipClock でこれを試したことはありませんし、アニメーションをサポートしていないブラウザーで実際にテストしたこともありませんが、可能なオプションが 1 つあることを願っています :-)

于 2013-08-28T19:29:21.430 に答える
1

z-index を変更するだけで IE8 と IE9 の問題は修正されますが、最新のすべてのブラウザーでは移行が中断されます。

特に I8 または IE9 をターゲットにするには、これを使用できます: JS ファイルに以下を追加します。

var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);

css では、次のコードで IE8 と IE9 を検出できます (flipclock.css の 160 行目)。

/* PLAY */
.flip-clock-wrapper ul.play li.flip-clock-before {
    z-index: 3;/*Original */
}
/*ie8 and ie9 fixes*/
html[data-useragent*='MSIE 8.0'] .flip-clock-wrapper ul.play li.flip-clock-before {
    z-index: 1;
}

html[data-useragent*='MSIE 9.0'] .flip-clock-wrapper ul.play li.flip-clock-before {
    z-index: 1;
}

それは私にとって問題を解決しました！

于 2013-10-28T21:17:09.343 に答える