ノンカフェインであなたにやさしい

Rails,HTML,JavaScript,jQuery,PHP,CakePHPなど

CSS Transform Scaleを使うと画像や文字がちらつく問題

参考ソース

参考ではちらつかないのですが…
ホバーしたら大きくなる仕様

<div class="cf">
  <div class="image-container">
    <img class="image" src="http://via.placeholder.com/350x150">
  </div>
  
  <div class="image-container">
    <img class="image" src="http://via.placeholder.com/350x150">
  </div>
  
  <div class="image-container">
    <img class="image" src="http://via.placeholder.com/350x150">
  </div>
</div>
.cf::after {
  content: "";
  display: table;
  clear: both;
  width: 100%;
}

.image-container {
  float: left;
  height: 150px;
  margin: 0 10px;
  position: relative;
  width: 350px;
}

.image {
  left: 50%;
  position: absolute;
  top: 50%;
  transition-duration: .3s;
  transform: translate(-50%, -50%);
}


.image-container:hover .image {
  transform: translate(-50%, -50%) scale(1.2);
}

対応策

1. backface-visibility: hidden を指定

指定する場所は画像を囲っている親要素だと解消する時が多かったです。
画像や文字自体に付けて解消する時もありました。
色々と付けてみるのがいいかと思います。

2. backface-visibility: hidden と overflow: hidden を指定 

こちらもなぜか解消できる系 一通り試してみるのが良さそう

その他. 組み方を変えてみる

imgタグを背景にする

imgタグを使わず背景で対応するなど これもダメなときと大丈夫な時があります。

親要素のwidthを調整する

親要素のwidthが%設定だったり小数点以下出ていて端数だと崩れる印象です。
最悪小数点がつかないようなレイアウトに修正することも考えられます。

Wordpress のデータベースをimportしようとしてUnknown collation: 'utf8mb4_unicode_520_ci' と怒られる問題

MySQLのバージョンの違いぽい ローカルは5.6、インポートしようとしたのが5.5 5.6では照合順序に utf8mb4_unicode_520_ci があり 5.5では対応していない

SQL文の中から _520 を削除してあげれば大丈夫とのこと

varchar(255) COLLATE utf8mb4_unicode_520_ci DEFAULT NULL,

とかを

varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,

としてあげる感じ

wordpressの$post->post_dateの日付の表示形式を変更したい

strftimeが使えるのかと思ったら使えなかったので

mysql2dateを使う

<?php echo mysql2date('Y/m/d', $post->post_date); ?>

フォーマットはstrftimeと同じみたいです

PHP: date - Manual

Chrome63 .dev ドメインを強制的にHTTPSに書き換える問題の解消 HSTS

解決策

別のドメインを使うようにしましょう 回避法はあるけど色々とめんどくさいので .local などに変えてしまえば良いようです

今回のHSTS問題

Chromeでhttpからhttpsに勝手にリダイレクトされる問題の解消[SSL] - ノンカフェインであなたにやさしい

ローカルの開発環境で .dev ドメインHTTPSに強制的にリダイレクトされてアクセスできなくなる問題に遭遇しました。

英語の記事を発見 Chrome 63 forces .dev domains to HTTPS via preloaded HSTS

色々回避法もありますがとりまドメイン変えてしまえばいいよとのこと

RailsでEnum元の数値を取得する

以下の設定の場合

class User < ActiveRecord::Base
  enum role: { admin: 1, viewer: 2, other: 3 }
  ...

Rails5の場合

user = User.create(role: 1)
user.role_before_type_cast
# => 1
# もしくは
user.class.roles[user.role]
# => 1

Rails4以前は

user = User.create(role: 1)
user[:role]
# => 1

Rails5で4以前のを試すと

user = User.create(role: 1)
user[:role]
# => admin

これはつらい…

まだRails4から5に移行していない場合は注意が必要そうです。