Monthly Archives: March 2014

Chrome 33 で opacity の transition がおかしい件

Chrome 33opacitytransition を他のプロパティ(transform とか)と組み合わせて使うとうまく動かなくなってた。
Safari、Firefox では大丈夫っぽい。
opacity 単体での transition はイケるみたいだけど。

こんな感じでそもそも動作しなくなります。

See the Pen gnbel by johnykei (@johnykei) on CodePen.


この辺でもバグ報告あがってるみたいです。最新の Chrome Canary ではきちんと動いてました。もうすぐ直るのかな?

いつ直るかわからないのを待っている訳にもいかないので、解決策を調べました。
opacity: 0 から 1 となっているところを opacity: 0.01 から 1 にするときちんと動きます。本当力技な感じ。

こちらが上記の動かないサンプルの修正版です。

See the Pen Chrome 33 opacity transiton bug (fixed) by johnykei (@johnykei) on CodePen.


とりあえずはこの方法か、 opacity を使わない方法で対応する必要ありそうです。

※ 2014/5/22 追記

いつの間にか Chrome 35 になってましたが、この問題は解決されているようです。


Crayon Syntax Highlighter のショートコードを excerpt から取り除く

すごく簡単なことだったけど、忘れないようにメモ。

Wordpress の標準の the_excerpt() を少しカスタマイズして使っていて、きちんとその中のフックに

のように、strip_shortcodes というショートコードを取り除く関数を入れていたのに、Crayon Syntax Highlighter のショートコードだけはうまく取り除けなかった。

よく調べていないからわからないけど、フィルターの優先順序の問題ぽい?
いろいろいじってみようとしたところで、何もいじらなくても簡単に解決できることに気づきました。

管理画面の 設定 > Crayon から、Crayon Syntax Highlighter の設定画面にいき、下の方の「その他」の項目の、Crayon抜粋から削除 のチェックボックスにチェックを入れるときちんと取り除いてくれました。

Crayon抜粋から削除
すぐに解決できてよかったです。きちんと設定を用意していただいて助かりました。
ただ、これだけ設定項目があると気づきにくいですね。