iPhone でtransform(rotate)が動かない件

iPhone でtransform(rotate)が動かない件

iPhone実機(Safari, Chrome)で、CSS「transform(特にrotate)」を指定した要素が正常に動かない場合の対応方法です。

【原因】

「transform: …」をした要素の親要素奥行きが指定されていないことが原因の一つらしい。

【対処】

「transform」を指定した要素の親要素に「-webkit-perspective」プロパティで奥行きを追記する
参考

上記サンプルでは「-webkit-perspective: 500px;」(CSS・24行目)の1行を親要素「#toggle」に追加することで解決しました。

「transform」プロパティの値にはZ軸や3Dの指定もあるので、iPhoneでは「transform」が指定された要素を厳密な3D空間として扱うのでしょうね。

javascript 別窓で開く

リンク先のページを別窓で開く javascript コードです。

PHP 参考サイト

PHP 参考サイト

いつも拝見させてもらっている PHP 参考サイト集です。

主に「PHPマニュアル」を参考にしていますが、たまにしか使わなくて忘れてしまう関数やクラスなどを取り上げたサイトのリンク先もブックマーク代わりにメモしてます。
良かったら参考にどうぞ!

全般

●PHP マニュアル:https://www.php.net/manual/ja/

オブジェクト


PHPプログラムのサンプルはこちらから。

vwで幅指定をすると横スクロールバーが表示される件

要素の横幅を「100vw(viewport width)」に指定すると、横スクロールバーが表示されるので注意!

【原因】Windows では Viewport にスクロールバーの幅が含まれるため。
MacOS・iOSではスクロールバーはフロート表示されるのでこの現象は見られない。(Androidは未確認)

【対策】パーセンテージ「100%」で指定する。

【CSS】縦書き(writing-mode)

ブラウザの対応がかなり進んできたので、使っているサイトも見かけるようになりました。
https://caniuse.com/?search=writing-mode

値の「sideways-…」は、現状、Firefoxのみ対応なので利用は難しい。

jQuery複数バージョンの混在

上記は片方の項目がチェックされたらラジオボタンのように他のチェックを外すjQueryを使ったプログラム。

このサンプルで、他のチェックを外すために使っている jQueryメソッド「.prop()」は、jQuery1.10以降から追加されたので、jQuery 1.12.4をCDNで読込んでいます。