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刷決定»