私はモバイル/タッチデバイス展開用のHTML5アプリを開発しており、PhoneGapを利用しており、現時点ではiOSプラットフォーム(Webkit)のみを対象としています。
私の問題は、Webkitが奇妙なことをする傾向があるという点で、CSS3トランジションで発生します(通常のjQueryアニメーションでも発生します)。たとえば、ここで表示できるコード(http://jsfiddle.net/lvl99/dSjcj/)では、ページをステップスルーするときに、シーケンスに戻ると(つまり、5ページから1ページに)、アニメーションが正常にレンダリングされます。ただし、前に進む(つまり、1ページから5ページに進む)と、ほとんどが醜い側で一貫性のないレンダリングが生成されます(Safariで表示することを忘れないでください。Safari5.1.7を使用しています)。
私はもともとjQueryMobileフレームワークを使用して開発していましたが、使用していた主要な機能はハッシュタグとトランジションを介したページルーティングでしたが、トランジションでこれらの問題が発生したため、JS/CSSを回避するためのより簡単なソリューションを開発しようとしましたjQMと競合します。残念ながら、私が出てきたエラーは実際にはSafari/Webkitに関連している可能性があります。
私はもともとjQuery.animate()
左側のプロパティで使用していましたが、現在transform
はjQMの方法に似たCSS3手法を使用して、速度を上げ、適切にレンダリングできるかどうかをテストしています。どちらも、さまざまな程度の機能不全に対応していません。
幸い、Firefoxはすべてを正常にレンダリングします。問題はありませんが、Firefoxはターゲットプラットフォームではなく、プロジェクトがPhoneGap環境のXcode内でコンパイルされると、Safariと同じ問題が発生します。以前の開発バージョンでjQMをまだ使用していたとき、Safariはそれを正常にレンダリングしました(iPadシミュレーターのSafariを含む)が、UIWebViewはそうではありませんでした。これはおそらくそれがNitroJSエンジンの問題であると私に思わせました(おそらくUIWebViewにはトランジションを適切にレンダリングする速度/パワー/機能がありませんでした-レンダリングを解放するためにすべてのアニメーションをCSS3に転送しようとしましたGPUへの操作)。
jQuery Transit、jQuery Animate Enhanced、TransformJSなどのさまざまなプラグインを使用しました。また、jQM内で独自のカスタムトランジションハンドラーをコーディングしようとしましたが、正しくレンダリングされませんでした(ただし、最も近いものになりました。FirefoxとSafariで機能し、UIWebViewでは機能しませんでした)。
さまざまな種類のコンテンツを含む要素の遷移に関しても一貫性のない結果が得られました。ビデオ、画像、フロート要素、複数の段落がすべてテストされています。シーケンスの両端(つまり1と5)への/からの遷移に関する問題もある段階でありましたが、今の私の問題はその昇順のページ遷移(つまり1から5)です。
私はこれに何日も費やして、この一見小さな問題に対処しようとしましたが、ユーザーがアプリ内を移動する方向に基づいてコンテキストに応じたこのようなスライドトランジションを持つユーザーエクスペリエンスには非常に重要です。最も簡単な解決策は、トランジションを削除することですが、Webkit / UIWebViewで問題が発生していることを正確に理解する方法がある場合は、その解決策を作成します。jQMがトランジションで経験するちらつきの問題にも関連していることは間違いありません。-webkit-backface-visibility: hidden
デフォルトの変換プロパティを設定するなど、Web上で提案された人々のためのCSS修正の多くも機能しませんでした-webkit-transform: rotateX(0)
。