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

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

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

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

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

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

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

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

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

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

https://moriawase.net/horizontal-scroll

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

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

多分これでいける。

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

animation GIFをJSで動的に読み込む 一度消して再度読み込むと最終形で表示されてしまう

サーバー側の仕様のようで、キャッシュ?がのこってしまうため一度 empty()で空にして、再度動的に追加しても最後のフレームになってしまう。
それをさけるために読み込むときに***.gif?=日付 という感じでタイムスタンプを入れればいける。

svgをbackground-sizeで変形しようとしても無視されるとき

jpgやpngだと当然のようにcover containが反応するのにsvgを背景にしたとき縦横比を変えることができませんでした。

Sketchなどで書き出せばその辺元々クリアなのかもしれないが、イラレで書き出してダメでした。
設定しだいではイケるのかもですが。

そんなときはsvgを何かしらのエディタで開いて

pathとか

preserveAspectRatio=”none”
を追記すると変形してくれるようです、

gulpで謎エラー。三点リーダーが原因?

events.js:160
throw er; // Unhandled ‘error’ event
^
Error: SyntaxError: Invalid or unexpected token in ~~~~.ejs while compiling ejs

If the above error is not helpful, you may want to try EJS-Lint:
https://github.com/RyanZim/EJS-Lint

こんな感じでお叱りうけるんだけど、原因はわからず。
ejs内のソースをすべて削除すると問題なくファイル更新されるので大元の問題ではないということで、
怪しい部分を一つずつ消してみてはgulpを走らせてみた。

最終的には・・・が原因だった。
自分で書いた・・・は平気なんだけど原稿でもらった・・・はダメ。
裏側の文字コードが違うのかもしれない。

テストサーバーでサイト構築、問題なしからのwordpressに入れたら変に崩れるときがある。CSSが無視される?

すごくレアなケースぽいけど備忘録。

おそらくWordpressを何度も制作していると自分のテンプレ的なものが出来上がっていると思う。

今回も何も気にせずにそのような作り方をして必要な場所を書き換え~~~

本番にアップ!だがちょっとだけ崩れる。
Flexboxの指定が無視されている。
上下センター合わせにして、って言ってるのにそこだけ無視されている。

CSSを見比べても問題なし。

type=text/cssとか入れても変化なし。

最終的にわかったのが

<!DOCTYPE html>
<html lang="ja">

ココをちゃんと記載せずに

<html>

で書いてしまったことが原因でした。

display:flexにしたら良きに計らえすぎて画像の幅とかが意図したより小さくなることがある

display:flexでレイアウトを横並びにするのはとても助かる機能なので利用しています。

が、今回画像とテキストが横並びになるレイアウトでテキストが多めの時に画像幅が勝手に狭くなる現象に遭遇。
画像のwidthを指定してもダメで困っていたが、以下の方法で対応可能。

子要素にflex:noneを指定すると下手な気遣いが減って画像幅を担保してくれました!
今回はimg側に上記CSSをあてました、

さくらサーバーで独自SSLの対応してみたら、なんかCSSとか効いていないとき。contact form7で気づく

さくらサーバーはちょっとクセがあるようで、SSL化してもプラグインなどが読み込むCSSやJSはhttpのままになってしまうらしい。

http://qiita.com/tabimoba/items/64ef60412abe7ad6f0ac

こちらのサイトを参考にすればいっぱつ。

wp-config.phpと.htaccessにちょいっと追記すれば良いようです。

BacklogのGit管理をsourcetreeでやっていたけど謎のエラー(mac)

基本的にはwindowsのsourcetreeで管理をしていて、問題なく動いていたが、出先でもファイルアップなど行う必要があるので先日macにもsourcetreeをインストール。

リポジトリとかはちゃんと認識して、コミットまではできるんだけどなぜかPushもPullもできなかった。

エラー文言は
「remote: Authorization required source tree」これ系のテキストがずらら〜っと。

認証が通っていないのかと思ったけどそういうわけでも無さそうな感じだったのでgoogle先生に伺ったら以下のように。
http://qa.atmarkit.co.jp/q/9346

とりあえず真似をさせていただいて、アンインストールからの再インストール

無事push完了

こっち系よくわからないからなんとなくなまま進み続けてしまう。。