AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ
AndroidやiPhoneなどのスマートフォンではHTML,CSS,JavaScriptにバグが多くてコーディングが大変になります。そこでバグを紹介しているサイト、記事をまとめてみました。(中にはバグではなく仕様なものもあるかもしれません)
iOS 8.4.1の:hover問題
iOS 8.4.1で:hoverを指定していると1タップでページ遷移できない問題
【STINGER5】AndroidのChromeで が「・」になってる気がする | ビビビッ
を に変更すると直るとのこと。
Mobile Safari 8でposition: fixedした擬似要素が完全に位置が固定されない - Weblog - Hail2u.net
Mobile Safari 8でposition: fixedした擬似要素が完全に位置が固定されないとのこと。
Android標準ブラウザがbackground短縮プロパティでbackground-sizeを初期化してくれない | masuP.net
backgroundではbackground-sizeが初期化されない件
Androidでinput要素とlabel要素を紐付けた際のバグ | CodePlus
Androidでlabel要素とinput要素を紐付け、入力フィールドにフォーカスした際にlabel内のテキストが入力フィールド反映されてしまうという事象
iOS7-bug: Shows white page when getting 304 Not Modified from server – VG Tech
サーバーが304を返す際にiOS7でページが真っ白になる
一部のAndroid4.x端末でtouchstartでe.preventDefault()してもclickイベントが発火する - しるてく
iScrollを使用しているサービスを一部のAndroid 4.2.2, 4.1.2端末で見ると、clickイベントが2回呼ばれてしまう。
Galaxy S4のWebviewで、非同期処理の中でのCanvasの描画がバグってる - 車輪を再発明 / koba04の日記
ネイティブの中で使うWebViewの話で、標準ブラウザとChromeでは発生しない現象です
AndroidのブラウザはBasic認証下ではアップロードも失敗する | MEMOUK
ダウンロードできないは有名な話なのですが、なんと同様に、アップロードもできない場合があります。
Android4系でoverflow: hiddenとposition: fixedで位置がおかしくなるバグ
このバグはAndroid4.0とAndroid4.1のブラウザで発生を確認しました。ChromeやiPhoneのMobile Safariでは発生しません。
[実機未検証]Androidでp要素の幅が狭まる時の対応策 | webutubutu
Androidのエミュレータでみると、本来なら空白は無いはずですが空白が発生しています。
スクロール時にCSS3 Animationsを一時停止したらFPSがけっこう良くなった | negic
スクロールが動き出した時にCSS3 Animationsを止めて、スクロールを止めた時にCSS3 Animationsを再度動作させるという処理を加えれば、スクロールがカクつくことなく、スムーズになります。
CreateJSを使用した際に一部のAndroid4端末でおこる不具合に関して | 水玉製作所
これはCreateJSを使用した際にAndroid4を搭載した一部のスマートフォンで発生する不具合に関する報告である。
Mobile Safariで最後の1文字が改行されてしまうバグ - くらげだらけ
iPhone/iPadのmobile safariやWebViewで日本語文字列の最後の1文字が不自然に改行されて表示されてしまうバグなのです。
language | Navigator - JavaScriptリファレンス
Android 2.3以下ではOSの言語設定に関わらず「en」を返すバグが存在します。
描画とかGPUアクセラレーションの怪 (モバイル編) ::ハブろぐ
iOSやAndroidのGPUアクセラレーションについて。
Android標準ブラウザでscrollTopが即座に更新されない ::ハブろぐ
Android2系でscrollTopが即座に更新されない。
html - Chrome on android resizes font - Stack Overflow
metaにinitial-scaleを指定しないとfont-sizeがでっかくなるバグがあるけどmax-height: 999999px;を追加すると直るよ。
(to-R補足 : JavaScriptコード中に$("#hoge").hide()があると発生するのを確認しました。$("#hoge").css("display","none")に変更すると直ります。)
Android × Canvas の即死ポイントとその回避策 | buccchi.jp
Android 2.3 で最適化したつもりのものが 4.0 の標準ブラウザで落ちたりする。というとこでハマったポイント3つを共有します。
「AndroidだけHTML5演出中のボタンが押せない」現象で疑うべきこと | moya log
Canvasアニメーションがiframeの中にある場合、HTML5のCanvasアニメーション中に表示されるボタンが、Androidでのみ押せない
Takazudolog - 地獄のvideo/audio要素
video/audioにハマりまくったメモとのこと。
GALAXY S III ProgreでCSS3アニメーションが利かなくなる場合がある | x-fit - クロスフィット -
Transformプロパティに、translateまたはtranslate3dを指定した場合の、画面表示完了後2回目以降のアニメーションでCSS3のTransitionを使ったアニメーションが無効になる。
iOS6でinputタグに幅100%とプレースフォルダを設定した時のバグ #HTML5 - Qiita
inputタグに'width: 100%;' と 'placeholder' を同時に設定した状態で、<デバイスを横から縦に傾きを変えると親の幅が横向き時の状態から戻らなくなるバグ
スマホサイトでtd/th要素へのposition:relativeはダメ!
iOS4.x系やAndroid2.x系のブラウザだとtd/th要素に指定したposition:relativeが無視されます。
jQuery1.8系のanimate()で一部のAndroid端末が落ちる件
jQuery1.8.0〜1.8.2でAndorid2.3.5端末がanimate()で落ちる件
0-9, Androidの一部機種でmeta[viewport]を無視する問題
Androidの一部機種でmetaのviewport指定が無視される件
0-9, iOS5でclick eventを貼ると要素が選択できなくなる問題
touchendでclickを貼って、click内で剥がせばOK
iOS6でjQueryのanimateメソッドが動作しなくなる現象が発生中 | x-fit - クロスフィット -
window操作(画面のスクロールやピンチ操作など)を行っている間にjQueryのanimateメソッドが一度でもコールされると、それ以降animateメソッドをコールしても動作しなくなる。
ソシオメディア | iOS6 Mobile Safari : ローテーションで余白が生じる現象への対処
iOS6 Mobile Safariで横幅を%で指定し、placeholder 属性を設定している場合に、デバイスの回転で表示が崩れる問題
iOS6でtransitionアニメーションが少し遅れて開始する問題[to-R]
iOS6でtransitionアニメーションとハードウェアアクセラレーションの問題について
iOS6 にしたら、addEventListener の第2引数にしていしてた、handleEvent メソッド をもつオブジェクトが使えなくなった? - babu_babu_babooのごみ箱
iOS6のaddEventListenerのhandleEvent メソッドの扱いについて
iOS 6におけるブラウザの表示フォントについて(Hiragino Kaku Gothic ProとProNでも違いが...)|Blog|Skyward Design
iOS6でのfont-familyの挙動について
iPhone 5でWebアプリをフルスクリーンで実行したときの表示サイズがおかしいときの対処法 | Gryng.me - html、CSS、Movable Type、JavaScriptのブログ
iPhone 5のフルスクリーンモード
【iOS5〜】iPhoneでposition fixedが効かない時の対処法 | Webamb | ウェブアンブ
iOS5、iOS6でのposition:fixedのバグ
iOS6 Mobile SafariがAjax POSTでキャッシュする問題を回避する方法 | クラスメソッド開発ブログ
iOS6のMobile SafariがAjax POSTでキャッシュする問題
iOS 6のSafariではAjaxの動作が異常-すでにデベロッパたちは周知
iOS6のロングポーリング問題
Androidは「apple-touch-icon」でいろいろハマるので要注意 | Tips Note
AndroidのWebクリップアイコンの注意点
しょぶろぐ - Android4.0とCanvasアニメーションの話
CreateJSやSencha touchのCanvasアニメーションやAndroid4.0の諸々の挙動について
Android 4.0でtouchendが実行されない?! - Gravity Pianist -個人的メモログ-
Android 4.0でtouchendイベントが発火しない現象について
Android4.0とiframe[to-R]
Android4.0のiframeについて挙動について
history.back()で戻るとscrollイベントが取得できない | satohu20xx's diary
iPhoneでhistory.back()で戻るとscrollイベントが取得できないことについて
Android4.0 で CSSアニメーションが重くなる | COLOPL Engineers' Blog | 株式会社コロプラ【位置ゲーで毎日の移動を楽しく】
Android4.0 で特定条件でbox-shadow を利用しているとアニメーションが重くなる件
Android4.0にはHTML5 History APIが実装されていない - 愛と勇気と缶ビール
Android4.0でHTML5 History APIがリムーブされた件
iPhoneでwindowの高さを取得: JavaScriptメモ
iPhoneではjQueryの$(window).height()で正確な高さが取得できない件。
iOS4.3でclientX,clientY: JavaScriptメモ
iPhoneのiOS4.3でclientX,clientYが取得できないバグ。
Android4でmask-imageとアニメーションを同時に設定するとマスクしなくなる - jsdo.it - Share JavaScript, HTML5 and CSS
Android4でmask-imageとanimationを同時に指定するとおかしくなる件
Android4系の標準ブラウザではbackbone.jsのRouterが無限ループする件
Android4でbackbone.jsのRouterがおかしくなる件
【Android爆発願】メディアクエリの特性を疑似要素(::after)とJavaScriptで取得するのは危険 | MJ-WAVE.COM
AndroidのgetComputedStyleとafter要素の関係
Android用ブラウザの問題
Androidブラウザにおけるvideo要素やaudio要素の対応表
スマートフォンでチェックボックスやラジオボタンを使いやすくする | BALLOG
iPhoneのradioボタンの拡大とlable要素の操作
Mobile SafariやAndroid標準ブラウザでhistory.backした際にonloadイベントを走らせる方法 | BALLOG
AndroidやiPhoneのonloadイベントの操作
iPhoneのSafariでは大きすぎる背景画像を使うと自動縮小されてしまう - F.Ko-Jiの「一秒後は未来」
iPhoneのbackground-Imageに関する挙動
スマートフォンブラウザのjQuery Clickイベントに関すること - くらげだらけ(くだくらげのBLOG)
iPhone,Androidのイベントバインディングについて
Androidの標準ブラウザにおいてtranslate3dが引き起こす不具合について | BALLOG
Androidとtranslate3d
Androidのタップハイライトカラーをどうにかしてみる | clear sky source
Androidとタップハイライトカラー
Androidにおけるリンク要素のアウトラインの不具合について | BALLOG
Androidとタップハイライトカラー
Galaxy Nexusで確認できたリンク要素のアウトラインの不具合について | BALLOG
Galaxy Nexusとタップハイライトカラー
ハマリメモ:Android の devicePixelRatio 1.5 問題【その仕事、蠍は留守です】
devicePixelRatioとtext-shadowの問題
Android端末でフォームのinput要素にフォーカスしたら、orientation:landscapeのCSSが読み込まれる
Android端末でフォームのinput要素にフォーカスしたら横向き用のCSS (orientation:landscape) が読み込まれてしまう件
mixi Engineers' Blog » iOSのMobile Safari上でのfocus()が妙な件を調べてみた
iOSのブラウザ(Mobile Safari)のfocusの挙動
Androidのレンダリングでハマったので対応策を書いてみる - Ememo
-webkit-backface-visibilityを利用したアニメーションチューニング
Androidとtransformとinputのバグ[to-R]
Androidのtransformとinputのバグ
BALLOG » Blog Archive » iPhoneでフォームへのフォーカス時に自動ズームしてしまう現象について
iPhoneでフォームにフォーカスすると拡大するバグの検証
Android Eclair(2.0/2.1)ブラウザでCanvasを使うときの注意点。 - 車輪を再発明 / koba04の日記
AndroidのCanvasのバグ
androidでboxshadowを重ねると、ぼかし0の時だけboxshadowが消える - jsdo.it
androidでboxshadowを重ねるとぼかし0の時だけboxshadowが消える
AndroidでCookieが送信されないという現象 - E-riverstyle Vanguard | CSSやXHTML,Javascriptやweb製作に関する事を紹介
AndroidでCookieが端末によっておかしくなる件
animationでopacityを同時に設定すると、Androidでopacityの遷移だけ無視される - jsdo.it
androidのanimationでopacityのバグ
@keyframesとAndroid[to-R]
@keyframesのandroidのバグ
iPhoneで特定のzoomとfont-sizeの際に文字サイズが拡大するバグ[to-R]
iPhoneの特定のzoomとfont-sizeのバグ
Androidで-webkit-box-reflectによる鏡面効果を指定する方法[to-R]
Androidで-webkit-box-reflectによる鏡面効果を指定する方法
Androidの特定デバイスでスクロールの挙動がおかしくなる件 | Facebook
特定デバイスでoverflow:hiddenでスクロールがおかしくなる件
WebTecNote - [css, css3, html] スマートフォン(iPhone, Android)ブラウザのバグまとめ
iPhone、Androidのバグまとめ
BALLOG » Blog Archive » Android端末におけるオーバーレイ表示時の困った現象の報告と、その対処法について
Androidでz-indexを無視してタップハイライトカラーが表示される件
iOSのSafariで特定のfont-sizeのときの謎の隙間 - Webtech Walker
iOSのSafariで特定のfont-sizeで右側に余白ができる件
user-scalable=noとposition: fixedを使用すると、-webkit-transformが動かなくなる - jsdo.it
Androidでuser-scalable=noとposition: fixedを使用すると、-webkit-transformが動かなくなる
Androidと-webkit-tap-highlight-color[to-R]
Androidでtap-highlight-colorがおかしくなる件
Androidのposition:absoluteとフォームの問題[to-R]
レイヤーとselect要素などの不具合
AndroidとjQueryのスライドアニメーションの不具合[to-R]
jQueryのslideメソッドの不具合
スマートフォンとposition:fixedのバグ
スマートフォンとposition:fixedのバグ
Android2.2 とtransformのバグ
Android2.2 とtransformのバグ
関連エントリー
スマートフォンサイトをデザインする上で知っておくべき10のTIPS
CSS3でセレクトボックスをカスタマイズ
jQueryを良くする25のTIPS
14のjQueryベストプラクティス
jQueryのコードを良くする5つのTIPS
スポンサードリンク
«DeNA Creative Seminar vol.1に出演します | メイン | Web制作の現場で使う jQueryデザイン入門 11刷決定»