twitterのタイムラインwidegetを使うときにレスポンシブにしたいと思いぐぐるとよく書いてあるのが
<a class="twitter-timeline" data-width="100%"
のくだり。
幅100%だから常に親に合わせる的設定なんだけど、iphoneで見ると親を無視してとんでもない幅になっている。
jsで親要素の幅を取得して、設定してもうまく行かず悩んでいたところ以下のサイトを発見。
iPhone7でTwitterのウィジェット（iframe）がはみ出す【解決】
簡単にいうとレスポンシブで利用しようとしている最大幅より大きい値の数値を強制的にwidthで設定をしてしまえば、ブラウザ側の解釈として大きすぎるのでwidthは無視、max-widthを参照しようとなるわけ。
でかいけつしました。
このアイデアを思いつくのが素晴らしいです。ありがとうございました。
ナビの固定などでヘッダーを固定、その子要素のナビがクリックで階層表示されるみたいなことをやっているとfixedした要素が画面の高さを超えることが多々ある。
そういうときにナビに対してoverflow-y:scroll;をしてスクロールできるようにするのだけどデフォルトのままだとカクカク
そのため
overflow-scrolling: touch;
を設定してスムーズになるようにするのだが画面の高さ以上にスクロールしようとすると画面が数秒フリーズする。
原因調べていたら以下のようなサイトの情報が。
http://webdev.jp.net/ios-safari-fixed-overflow-scrolling-bug/
諦めるしか無いのか・・・
と思っていたけど試しに親要素自体に
overflow-scrolling: touch;
を設定してみたらバグなくなった。
たしかfixedとoverflow-scrolling: touch;は一緒にかけるな。的発言があったような気もしつつ。
まぁいいか。
今までは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);
とすると当初の想定通りの重なりあいになりました。
文字だけだとわかりづらい。
なかなかやることが無さそうなシチュエーション。
最初からFixed出来ればラクなんだけど、その要素を通過するまで普通にコンテンツ内にまぎれていて、それを越したら画面中央までアニメーション。そして固定。
スクロールの判定はJsでやる。
ちなみに今回はサイトの構成上、root直下に該当要素を設置。
まるでちょうどとあるコンテンツの下にあるように見せかけるためJsで初期位置を設定。
コツはJsで直接位置を調整するのではなく、Classの付与でCSS側でコントロール。
初期設定
position:absolute; left:50%; width:(93/640)*100%; margin-left:-(93/640/2)*100%; height:auto; z-index:100;
Class付与
.scroll{
position:fixed;
top:0% !important;
animation: page_center 0.2s linear 1;
-webkit-animation: page_center 0.2s linear 1;
animation-fill-mode: forwards;
height:100%;
}
@keyframes page_center {
0% { transform: translate(0, 0); }
100% { transform: translate(0, 40%) ; }
}
スクロールを上に戻したときにもClassを付与
.scrollback{
position:absolute;
animation: page_top 0.2s linear 1;
-webkit-animation: page_top 0.2s linear 1;
animation-fill-mode: forwards;
height:100%;
}
@keyframes page_top {
0% { transform: translate(0, 150px); }
100% { transform: translate(0, 0px) ; }
}
こんど清書しよっと。
iPhone5s : 320 × 480px
iPhone6 : 375 × 667px
iPhone6 Plus : 414 × 738px
Plusだけはデザイン分けた方がいいですね。
横一とかにしてしまうと無駄に幅広になってしまう。
さすがは海外。
ちゃんと用意されているんですね。
以下、参考サイトです。
http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
もうレスポンシブでやるとしてもこんがらがります。
デザイナーが1パターンのPSDしか作っていないと、幅が広がった時の想定が分からないので苦しいですね。