Webkit (「Webkit 3.1」としてリストされているブラウザー) を実行している Android フォンで Web アプリをデバッグしています。weinreを使用してコンソールを表示し、デバッグ情報をログに記録しています。

Android Webkit からのログ メッセージは、他のブラウザーとは大きく異なります。通常の出力ではなく、ほとんどの場合、次のように表示されます。

このメッセージの解釈方法やデバッグの進め方がわかりません。

このボタンを作る方法は CSS で、Angled 、Drop shadow、Inset shadow で幅に柔軟性がありますか?

ここで作成しようとしましたhttp://jsfiddle.net/jitendravyas/6RsnN/しかし、それに角度を付ける方法と、その周りに切り抜きの境界線を作成する方法はありません。

また、ボタンの幅は柔軟にする必要があります。

これは iPhone 用にのみ作成しているため、完全な CSS3 が許可されています。

Chrome (WinXP では 19.0.1084.46 m) および Safari (OS X 10.7.4 では 5.1.7) では、このフィドルhttp://jsfiddle.net/Vkpwm/が機能します。Google 画像をクリックすると緑色の div が表示/非表示になりますが、iPhone と xCode の iPhone シミュレーター (ダイレクト ページhttp://jsfiddle.net/Vkpwm/show/を使用) にロードすると、div は表示されません。再び表示されます。

「-webkit-transition: 0.5s;」という行を削除します。CSSからそれは機能しますが、明らかにアニメーションが壊れます。「visibility: hidden;」という行を削除する も機能しますが、div がまだそこにあり、イベントが発生することを意味します (たとえば、div が完全に不透明であってもアラートが発生します)。

これは iOS のバグですか、それともデスクトップ ブラウザで回避できる何か間違ったことをしていますか?

デザイン

レスポンシブデザインの連絡フォームには、はめ込みシャドウと通常の外側シャドウの両方を含む入力フィールドがあります。下の画像を参照してください。

コード

問題

iOSv4+はボックスシャドウを正しく表示しません。下の画像を参照してください。

テスト済み

-webkit-box-shadowを使用してみました。

display:block;input要素に適用しました。

現在の回避策

私はこれをする必要がないことを望みます、しかしこれは私が私の望ましい効果を得ることができる唯一の方法です。

HTML

CSS

この回避策を使用しても、iOSのはめ込みシャドウは適切にレンダリングされません。しかし、それは十分に近いです。

私の質問

1つの要素のボックスシャドウの複数のインスタンスをiOSデバイスで適切にレンダリングすることは可能ですか？そうでない場合は、はめ込み影はどうですか？または、このプロパティとその値を誤って使用していますか？

前もって感謝します！

iPad3でWebkitパースペクティブCSSプロパティを設定すると、子要素が非常にぼやけてレンダリングされます。これは、Retinaディスプレイ以外の場合に画像がレンダリングされるようになります。明確にするために、私がぼやけてレンダリングする画像について話しているのではなく、DOMの子要素がぼやけてレンダリングしています。

それについて何ができるでしょうか？

Z軸での移動が必要なアニメーションを使用しているため、プロパティを削除するだけではオプションではありません。

プロパティはCSSで次のように設定されます。

これについて助けてくれてありがとう！

要素にプロパティを適用するか、そのスクロールがまったく機能しないというスクロールを完全に壊したwebkit-transform親のようです。webkit-over-flowing-scrolling: touch

誰かがこのバグを経験し、解決策を知っていますか?

Webkit のモバイル バージョン (具体的には、モバイル Safari としての iOS 5.1.1 上の Webkit 534.46、および現在は iOS 用 Chrome) で問題が発生していますが、これは私が見たどのデスクトップ ブラウザーでも発生しません。(つまり、以下のデモは Webkit のモバイル バージョンで表示する必要があります。)

これが問題の実例です。CSS のコアは非常に単純です。ページの左側にアルファベットのインデックスを配置します。

この問題は、要素がボディの上に固定されている場合に発生します。スクロールが変化し、入力の受け入れを停止するまで、完全に操作できます。スクロールを（手動で）1ピクセルでも揺らすと、再びアクティブになります。この例は可能な限り単純に保たれ、JavaScript は使用されていません。実際に叩いた後、要素がスクロールされていると認識しているように見えますが、視覚的には修正されていることがわかりました。つまり、「A」をクリックしてからもう一度「A」をクリックしようとすると、2 回目のクリックが表示されることがありますが、それはリストのさらに下になります。これは、CSS リフローの問題のように思えました。モバイル Webkit がリフローの数を減らそうとしていることは知っています。

回避策の実例を次に示します。

JS を使用して、スクロール時にドキュメント全体の CSS を強制的にリフローさせることができます (スクロール後 100 ミリ秒まで発生しないようにするスロットルを使用)。これは、単純な例でこの問題を回避するようです。残念ながら、これはこの問題の実際のバージョンには役立ちません。

これは問題ページと回避スクリプトのコードです。

私の質問は、ここで何が起こっているのか、私が見逃している CSS の回避策はありますか? 具体的には、クリックが固定要素の正しい場所にヒットするのを妨げているレイアウトの状況が何であるかをCSSの第一人者が理解できるかどうかに興味がありますか? より良い理解は、本当の修正を見つけるのに役立つかもしれません.

編集:この例では、ビューポートをウィンドウのサイズに明示的に強制していることを忘れていました。つまり、position:fixed は要素をウィンドウの左側に固定する必要があります。

更新 (2012-09-20):これは、iOS 6 のモバイル Safari (および UIWebView) で修正されたようです。回避策は、最初に iOS 6 未満であることを確認する必要があります。たとえば、CssUserAgentを使用すると、次のようになります。

div水平方向にスクロールする必要があるがあります。これはなし-webkit-overflow-scrollingでも問題なく動作しますが、iPhoneでネイティブバウンスが発生しません。必要に応じて、垂直方向ではなく、水平方向にのみスクロールします。

CSSプロパティを追加してに設定するとtouch、期待どおりに水平方向にスクロールします。ただし、垂直方向にもスクロールします。つまり、スクロール可能な領域は表示可能な領域と同じように見えます。つまり、コンテンツは各方向にバウンスしますが、スクロールさせる必要のあるコンテンツはありません。このスクロールを水平のみに制限できますか？

注：overflow-yはに設定されhidden、overflow-xはscrollです。Webインスペクターで、すべての要素の高さが100ピクセルであることを確認したので、スクロールの原因となっている要素はないと思います。

CSS3 2D Transforms を Android 2.3 で、デフォルトの Webkit エンジンを使用するブラウザー (デフォルトのブラウザー、Dolphin HD、Amazon Kindle Fire Silk ブラウザーなど) で動作させるのに問題があります。Android 2.3 Webkit エンジンは 2D 変換をサポートしており、2D 変換を使用していくつかのサイトを正しくレンダリングすることができましたが、私のサイトだけではありません!

2D 変換と競合する可能性のある Android 2.3 の問題を知っている人はいますか? または、Android 2.3 webkit レンダリング エンジンを使用して、ブラウザーの css をターゲットにする良い方法はありますか? 私は Modernizr を使用していますが、Android 2.3 ブラウザーのテストで 2D 変換が陽性であるため、このコンテキストでは機能しません。

これが私のサイトです: http://StevenGerner.com . フロント ページで、2 つの要素 (サイト タイトルと h2 要素) を -90 度回転させていますが、どちらも Android 2.3 ブラウザーでは回転しません。他の CSS 変換も試しましたが、何も変換されないようです。ページ全体を基本的なものだけに取り除いた場合、変換は問題なく機能するため、おそらく私のサイトには他の競合があり、何が原因なのかわかりません! 変換に固有の CSS は次のとおりです。

この問題は Android 2.2 にも当てはまる可能性があります。ただし、現在、テストする 2.2 デバイスはありません。

ご意見、ご提案、アドバイスをいただければ幸いです。これは私を夢中にさせています！

デバッグのために Catalyst で Trigger.io を使用しています。アプリでスローされた JavaScript 例外が、Trigger.io の Forge 出力メッセージに反映されないようです。

次のような on エラー ハンドラを使用して、この問題を軽減しようとしました。

これにより、実際に例外がキャプチャされ、メッセージが出力されます。ただし、この場合url、 とlinenumberは報告されません。これを最小限にします。

これは、私が見落としている可能性のある文書化された解決策があるか、誰かがより信頼できる解決策を持っていることを願っています。

アップデート

出力メッセージの例を次に示します。

[FORGE] 'JavaScript error: TypeError: \'undefined\' is not an object on line 0 for undefined:0

Jquery を使用します。

更新 2

これは、未定義の TypeErrors に対してのみ発生するようです。他のエラーが報告されているようです