1

回転用の CSS3 アニメーションを使用して要素に CSS クラスを追加/削除する JavaScript アニメーションを含む、いくつかの単純なアニメーションを使用するページがあります。私はキャンバスを使用していません。

PC では、ページは Chrome/Safari、Firefox、および IE で見栄えがよくなりますが、Mac では、WebKit (Chrome および Safari 5.0.3) で表示すると、ページの多くの要素が完全に欠落しています。Mac の Firefox では問題なく表示されます。欠落している要素には、アニメーションが適用されていません。それらとアニメーションの間に関連性は見られません。

ページは検証され、ベンダー拡張機能と私の clearfix の zoom プロパティを除いて、CSS はほぼ検証されます。ページ上のすべての JavaScript を無効にしても、何も変わりません。欠落している要素はソースにあり、ページには表示されません。

一見すると、Z インデックスが目に見えない要素でおかしくなっているように見えます。ただし、これらを変更しても問題には影響しません。ドキュメント全体の絶対位置、相対位置、固定位置、および浮動要素をすべて削除しても、問題には影響しません。何かを行う唯一のアクションは、すべての Webkit アニメーションを削除することです。
すべてのアニメーションを適用すると、ページ上のほとんどすべてが消えてしまいます。

これは私のアニメーションの 1 つの例です -- 簡単なもの: 

@-webkit-keyframes propeller {
    0% {-webkit-transform: rotateX(90deg);}
    50% {-webkit-transform: rotateX(1deg);}
    100% {-webkit-transform: rotateX(90deg);}
}

#element {
    -webkit-animation:propeller 1s linear;
    -webkit-transform-origin:50% 50%;
}

アニメーションが呼び出されなくても、キーフレームが存在するだけでページが壊れます。特にこのアニメーション (-webkit- ベンダー プレフィックスのみ) を使用すると、「#element」の偉大な祖先の兄弟である大きなフォームが消えてしまいます。

ここに私が取り組んでいるページへのリンクがあります。私はデザインとは何の関係もありませんでした: http://goo.gl/6XXcV

すべてのアニメーションは animations.css に含まれており、すべての JavaScript アニメーションは general.js に含まれています。

私は Mac を持っていないので (Microsoft Expression Web 4 SuperPreview を使用しているだけなので)、これは私にとって非常に遅々として進みませんでしたが、私のクライアントは Mac を持っていて、満足していません。アドバイスをよろしくお願いします。

4

2 に答える 2

0

問題の大部分は、Microsoft Expression Web 4 SuperPreview の Mac/Safari 5.0.3 エミュレータ サービスのバグによるものであることが判明しました。-webkit- ベンダー プレフィックスが CSS3 アニメーションに使用されると、アニメーションとは無関係に見える要素が、visibility:hidden を持っているかのように動作します。

Chrome を搭載した実際の Mac を使用しているクライアントによって最初に報告された、要素が消えるという同様の問題は、@font-face で使用されていた不適切な .svg フォント変換によるものと思われます。svg フォントは Mac/Webkit でレンダリングされていましたが、それが使用されている要素と親要素のスタイルを破壊しているように見えました。別の変換ユーティリティを使用してフォントをもう一度 svg に変換すると、問題は解決しました。変。

于 2012-10-22T06:29:39.530 に答える
0

Chrome for mac と Firefox for mac (それぞれバージョン 22.0.1229.94 と 14.0.1) でサイトをプルアップしたところ、いくつかの間隔の違い (わずかな違い) を除けば、見た目は同じです。私が目にする唯一の奇妙な点は、ウィンドウが（一見不必要な）水平スクロールを保証するのに十分狭い場合、すべてのグラフィックの横に水色の背景が表示されることです。

正確には何が欠けていますか？

于 2012-10-20T05:55:58.527 に答える