今まではJSなどで親要素の幅を取得してそれを設定して～～
とやっていたが、とても参考になるサイトを発見。
https://moriawase.net/horizontal-scroll
上記のサイトだとinline-blockを利用しているがflexで出来たら良いね？って思ったら出来た。
inline-blockの要素間の隙間調整がめんどくさいなと思ったけど解決。
.parent-parent{
overflow-x: auto;
}
.parent{
display: flex;
white-space: nowrap;
}
.child{
お好きなように
}
多分これでいける。
参考サイト様 ありがとうございました。
タイトルで全てを終わらせている感じ。
ちょっと複雑な重なりあいをテストしていてタイトルの現象にハマった。
<div class="block-1st"> <div class="saizenmen">最前面に来てほしい</div> </div> <div class="block-2nd"> block-1stに少し喰い込む形にする（margin-top:-50px; etc）けど、その内部の.saizenmenよりかは裏に回りたい </div>
こんなとき。
.box-1stには背景だけ入れてみる。
.saizenmenに
position relative
z-index 1000
transform: translate3d(0, 0,0) //iphoneなどでスクロール中にfixedしてほしいから追加
としてみて、
.block-2ndに
position:relative;
としてみると
優先順位としては
.saizenmen > .block-2nd > .block-1st
になってほしいのにならない。
その理由としてはtranslate3dのｚ軸の指定が悪さをしていた。
z-indexよりもそのz軸の指示を優先するらしく。
なので
transform: translate3d(0, 0, -1);
とすると当初の想定通りの重なりあいになりました。
文字だけだとわかりづらい。
iPhone5s : 320 × 480px
iPhone6 : 375 × 667px
iPhone6 Plus : 414 × 738px
Plusだけはデザイン分けた方がいいですね。
横一とかにしてしまうと無駄に幅広になってしまう。
とある案件で、PCでのチェックはOK、IphoneもOK、AndroidもOKとチェックも終わったなーと思ってたらAndroid4.0の機種でSVGの背景画像が表示されていないという現象が。
他のSVGは表示されている（過去に他の方が作成済み）ので対応していない訳ではない。だがファイル自体はちゃんとアップされている。
別にCSSに何か記述忘れがあるわけではない。
前担当の方に確認をしたらすぐに判明。
IllustratorでSVGを作成し、保存する際にウインドウが出るのだがオプションというトグルが存在していた。こんなところは普通触らない箇所なんだが、そこに大切な項目がありました。
この「レスポンシブ」っていうところ。
これに基本的にはチェックが入っているが、これが入っているせいで作成した際のサイズを律儀に守ってしまうことがあるらしい。
ベクターデータだし、CSSでbackground-size指定すればいいんだから大きめて作っちゃえーとやってしまうとこの罠にはまる。
よりによって白いアイコン作っていたから背景と同じ色でろくに気付けず。
今後はリアルに使用するサイズ感で作成することを心がけねば。。
※これを外すことでどんな影響が出るのかまだテストしておりません。※
Androidは古いものは無視されるので、なかなかIE6のようにしぶとく古いVerが生き残りますな。
iOSはposition:fixed;に対応したが古いAndroid OSは未対応のままです。
簡単に対応するには
・user-scalable=noをmetaに入れる がいいみたいですがユーザー的には拡大出来ないのは困ります。
なのでもう一つ。
・-webkit-backface-visibility: hidden;
これをfixedした要素に追記するとちゃんとfixedが動くようです。
古い機種対応が一番時間を取られてバカバカしいなー。