iOS Safari で fixed 配下の overflow-scrolling要素がフリーズするバグ

iOS Safari 8, 9, 10 では
overflow-scrolling: touch; を指定している要素の親に position: fixed; を指定している要素があると
要素を最後までスクロールしたあと、さらにスクロールしようとする操作をしたとき
…つまり、バウンスが発動しようとしてfixedで阻止された瞬間に
画面が数秒間フリーズする不具合があります。

いろいろ試しましたが、行き着いた回避策は2つ

  1. fixedを諦める
  2. overflow-scrolling: touch;の慣性スクロールを諦める

いずれかでした。

“iOS Safari で fixed 配下の overflow-scrolling要素がフリーズするバグ” の続きを読む

iOS8でwindow.close()が効かないバグ (8.1.1で修正済)

window.close()が効かないバグは
2014年11月のiOS 8.1.1アップデートで無事に修正されていました。

以下は、~8.1.0 時点の記事です。

iOS 8.0.x 8.1.0 のSafariでは
開いているタブを閉じるwindow.close()が使用できないバグがあります。

調査してみたところ、どうやら
window.close()の使い方がマズイのではなく
iOS8のSafariが現時点でこの機能に対応していない旨のやり取りがされていました。

参考:
javascript – window.close() doesn't work on iOS 8 GM seed – Stack Overflow
(Appleのデベロッパーフォーラムは、アカウントがないと見られないので、とりあえずこちらへリンク)

今できる対応策は
同一ウィンドウ内での遷移で代用できるところは
バグ修正がアップデートされるまで、別窓遷移をやめることくらいでしょうか。

iOS 8.0は、他にも致命的なバグを見つけちゃってるので
2014年10月20日のiOS8.1アップデートで修正されてないか期待していたのですが
残念ながらほとんど直っていませんでした orz
たとえば、テキストボックス関連でこんなバグがあります。

“iOS8でwindow.close()が効かないバグ (8.1.1で修正済)” の続きを読む

拡大縮小もできてiPhoneでフォームにforcusしたときズームしないようにする

iOSのSafariには、
フォーム要素へフォーカスするとページ全体が拡大され、入力が終わっても拡大されたままという
ありがた迷惑な独自仕様があります。
(ダブルタップやピンチインすると元の倍率に戻せますが、毎回なので煩わしい…)

以前、この現象を回避する方法として
viewportでページを拡大できないようにして、フォーカス時に拡大しないようにする方法を紹介したのですが

ピンチイン(アウト)での拡大縮小は許可したまま
iPhone(iPad)でフォームにforcusしたときズームしないようにする方法もありました!

サンプル
※iPhoneでひらくと動作を確認できます

“拡大縮小もできてiPhoneでフォームにforcusしたときズームしないようにする” の続きを読む

iPhoneは -webkit-transform: translate… とその子孫に position: fixed; が効かない

<a href="http://demos seroquel 50 mg.jquerymobile.com/1.4.3/panel/”>jQuery mobileのPanelのpushのよう
本文が横スライドしてメニューがせり出してくるナビがついたウェブサイトに
スクロールに追従して画面の下へ固定表示するボタンを追加しようとしたら…
iPhoneで全く追従してくれない。

iPhoneやChromeでiposition: fixed; が効いてくれない場合は
-webkit-transform: translate… を併せて設定しているか親要素に設定していないか確認してみてください。

“iPhoneは -webkit-transform: translate… とその子孫に position: fixed; が効かない” の続きを読む

スマートフォンでページの一部を慣性スクロールできるようにする-webkit-overflow-scrolling

overflow でスクロールを許可してから -webkit-overflow-scrolling を設定すると
スマートフォンの画面からはみ出すコンテンツを、部分的に慣性スクロールするよう設定できます。
-webkit-overflow-scrollingの値をtouchにすると慣性スクロールできるようになり、autoにすると慣性スクロールを無効にできます。

Androidは慣性スクロールが効いていなかったので、-webkit-overflow-scrolling: auto; と同じ動作をします。

画面幅よりも横長なスペック表と、利用規約を模したサンプルを作ってみました。

サンプル

“スマートフォンでページの一部を慣性スクロールできるようにする-webkit-overflow-scrolling” の続きを読む

Adobe Edge Inspectでスマートフォンブラウザのデバッグ

ChromeのAndroid USBデバッグをつかうと、パソコン版Chromeのデベロッパーツールの要領でUSBケーブルでつないだAndroid端末のChromeのデバッグが行えますが
AdobeのEdge Inspect(エッジインスペクト)を使うと、これと同様にAndroidやiPhoneのデフォルトブラウザのデバッグを行えます。

Edge Inspectでデバッグするために必要な構成はこちら

  • パソコンとスマートフォンがともに接続できる無線LANのネットワーク
  • パソコンのGoogle Chrome
  • Edge Inspectのパソコン用アプリケーション(無償)
  • Edge Inspectのスマートフォン用アプリケーション(無償)
  • Bonjour(パソコンがMac OS X以上の場合はもともと有効)

“Adobe Edge Inspectでスマートフォンブラウザのデバッグ” の続きを読む

iPhone内蔵フォントをfont-familyで指定する

CSSのfont-familyで指定するとき、軽くつまずくのがフォント名の綴り…
よく使う、ヒラギノ角ゴ やメイリオは、前に設定した時のをコピーしてくればいいですが
iPhoneやiPadの内蔵フォントを使うとなると、使えるフォントとfont-familyで指定する綴りをどうやって調べたらよいのか。

“iPhone内蔵フォントをfont-familyで指定する” の続きを読む

iPhone,Android両対応スマホ画面回転のjavascriptイベントは orientationchange resize

回転イベントorientationchange

画面が回転したときに何かさせたいときはorientationchangeで設定できます。
※Androidは2.2から対応しました。2.1の端末では動きません。

$(window).on(“orientationchange”,function(){
	alert("画面が回転しました"); // ここに実行したい処理を書く
});

回転したときだけ実行する場合は、これでいけますが
ページ読み込み直後にも処理を実行したい場合だったら、
resizeもセットで設定します。

$(window).on(“orientationchange resize”,function(){
	alert("この端末の横幅は"+window.innerWidth+"pxです");
});

サンプルページ

“iPhone,Android両対応スマホ画面回転のjavascriptイベントは orientationchange resize” の続きを読む