タグ

ブックマーク / medium.com/@onotakehiko (2)

  • Velocity.js の CSS アニメーションに will-change を自動的に適用する - ONO TAKEHIKO - Medium

    いまは jQuery を使わず Vanilla で書くのがモダンな実装なのでしょうか。しかし流行にあまり左右されたくない自分はまだまだ jQuery を使い倒しています。何かトラブルに見舞われた際に先人のリソースが蓄積されているメリットもありますし。 そしてそんな jQuery のアニメーションエンジンとして最も使われているだろうプラグインが Velocity.js かと思います。CSSアニメーションにも対応していてそのままでもかなり速く動作します。 ただ CSS アニメーションについてはさらに最適化する方法があります。 CSS will-change とはあまりメジャーにはなっていないようですが、CSS にはアニメーションを最適化する will-change と呼ばれるプロパティが存在します。 文字通りなので察しがつくところでもあるかと思いますが、ブラウザに対しあらかじめどの値が変化する

    Velocity.js の CSS アニメーションに will-change を自動的に適用する - ONO TAKEHIKO - Medium
  • iPhone X の Safari における Web コンテンツの表示 - ONO TAKEHIKO - Medium

    iPhone X が発表されて間もなく、ディスプレイの「切り欠き」については至るところでちょっとしたイジリ合戦が始まっています。中には実際に信じてしまっている人もいるほど秀逸なものがありまして、それがこちら。 思わずクスッときてしまいますが(笑)、まあ当然こんなことにはなりません。 iPhone X にはディスプレイの上下左右に iOS の占有領域が存在し、それ以外(アプリのタッチイベントを認める領域)を Safe Area と呼ぶようです。Safe Area の外にある上部領域にはステータスバーとして時計やアンテナのインジケータなど iOS のシステムアイコン等が並び、下部の領域には iPhone X で導入された「ホームバー」が存在することになります。 では iPhone X の Safari で Web サイトを表示した場合に一体どのようになるのか?それを Web 上の情報を元にまと

    iPhone X の Safari における Web コンテンツの表示 - ONO TAKEHIKO - Medium
  • 1