カテゴリー別アーカイブ: iphone

iphoneでtwitter widegetのiframeが横にはみ出るバグの修正

2018年2月4日 shogo コメントをどうぞ

twitterのタイムラインwidegetを使うときにレスポンシブにしたいと思いぐぐるとよく書いてあるのが

<a class="twitter-timeline" data-width="100%"

のくだり。

幅100%だから常に親に合わせる的設定なんだけど、iphoneで見ると親を無視してとんでもない幅になっている。

jsで親要素の幅を取得して、設定してもうまく行かず悩んでいたところ以下のサイトを発見。

iPhone7でTwitterのウィジェット（iframe）がはみ出す【解決】

簡単にいうとレスポンシブで利用しようとしている最大幅より大きい値の数値を強制的にwidthで設定をしてしまえば、ブラウザ側の解釈として大きすぎるのでwidthは無視、max-widthを参照しようとなるわけ。

でかいけつしました。

このアイデアを思いつくのが素晴らしいです。ありがとうございました。

CSS, iphone

position:fixed;にした要素の子にoverflow-scrolling: touch;を設定するとフリーズすることがある

2017年10月5日 shogo コメントをどうぞ

ナビの固定などでヘッダーを固定、その子要素のナビがクリックで階層表示されるみたいなことをやっているとfixedした要素が画面の高さを超えることが多々ある。

そういうときにナビに対してoverflow-y:scroll;をしてスクロールできるようにするのだけどデフォルトのままだとカクカク

そのため
overflow-scrolling: touch;
を設定してスムーズになるようにするのだが画面の高さ以上にスクロールしようとすると画面が数秒フリーズする。

原因調べていたら以下のようなサイトの情報が。
http://webdev.jp.net/ios-safari-fixed-overflow-scrolling-bug/

諦めるしか無いのか・・・

と思っていたけど試しに親要素自体に
overflow-scrolling: touch;
を設定してみたらバグなくなった。

たしかfixedとoverflow-scrolling: touch;は一緒にかけるな。的発言があったような気もしつつ。
まぁいいか。

Android, CSS, iphone

iphoneなどのスマホで横スクロールメニューを作るけど横幅設定がめんどうくさい

2017年8月30日 shogo コメントをどうぞ

今まではJSなどで親要素の幅を取得してそれを設定して～～
とやっていたが、とても参考になるサイトを発見。

https://moriawase.net/horizontal-scroll

上記のサイトだとinline-blockを利用しているがflexで出来たら良いね？って思ったら出来た。
inline-blockの要素間の隙間調整がめんどくさいなと思ったけど解決。

.parent-parent{
overflow-x: auto;
}
.parent{
display: flex;
white-space: nowrap;
}
.child{
お好きなように
}

多分これでいける。

参考サイト様　ありがとうございました。

Android, CSS, iphone, Sass

iphoneなどのスマホでposition fixedにした時にスクロール中にｆｉｘｅｄしてくれないからtransform: translate3dで対応してみたらz-indexではまった

2016年12月12日 shogo コメントをどうぞ

タイトルで全てを終わらせている感じ。

ちょっと複雑な重なりあいをテストしていてタイトルの現象にハマった。

<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);
とすると当初の想定通りの重なりあいになりました。

文字だけだとわかりづらい。

CSS, iphone, JS, Sass

position:absolute;で設定していた要素をある地点までスクロールしたらposition:fixed;に変更する。けど動きおかしい

2016年3月29日 shogo コメントをどうぞ

なかなかやることが無さそうなシチュエーション。

最初から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) ; }
		}

こんど清書しよっと。

Android, CSS, html, iphone