MacのChromeがいろいろおかしい

ただこれ Mac上だけのお話しです
追記 2017.2.12 本件はバージョン56で修正されました



アンチエイリアス というのは
文字の可読性を上げるためにジャギーを軽減することを指しますが
MacではそもそもOS自体がアンチエイリアスに対応しています(Windowsはしていない)
それをさらに

-webkit-font-smoothing: antialiased;

とCSS指定することで フォントが若干細くなり 細部がよくわかる(可読性が上がる)ようになります
ただしこちらはベンダープレフィックスの -webkit- が示すとおり ブラウザ全般に通じる指定ではなく
webkit系列のブラウザのみです
ChromeのレンダリングエンジンはBlinkですが かつてはAppleとwebkitエンジンを共同開発していましたので両者の間には互換性があります
というわけでこの指定は webkit系列ブラウザ限定 です
・Google Chrome
・Safari
・Opere など

同じ意義・定義でFirefoxにも

-moz-osx-font-smoothing: grayscale;

というのがあります
用途はChromeのそれと同じで Firefox限定

簡単に言うと 本来はantialiasedの指定で文字が細くなるところが
アニメーションCSSを併用すると一部無効化されてしまうということです

サンプル画像(クリックで拡大)



赤枠で囲った部分だけそれ以降の文字よりも太くなっているのがわかるかと思います
赤枠以降は antialiased が効いている状態
赤枠の部分は無効化されている状態

これ 以前のChromeにもあった症状だと記憶してるんですけどね (´・ω・｀)
昔あった表示不備が再現されている… って最近感じるんだけど(笑)
果たしてこれが Chromium(ブラウザの基盤)のバージョンに起因しているのか…

Chromiumというのはブラウザのベースになるオープンソースですが
それに各社の独自性をくっつけてリリースしているのが
Google Chromeであり
Vivaldiであり
Operaであり…
という各種ブラウザで 同系列です(ベースが同じ)
Safariは違います Safariは純然たる webkit です

この症状が出るのが Chromeのみ なんですよねぇ (´・ω・｀)
同じChromiumベースの VivaldiやOperaではちゃんと機能しています
SafariはChromiumではありませんが webkitエンジンということで こちらもちゃんと効いてます
grayscaleという値で指定するFirefoxも問題なし

ということはChromiumのバージョン？
それともChromeが付加した独自性に起因？
ちょっとよくわからん ←

ともかく 現段階でこういった現実がありますのでお知らせしておきます
発生条件をもう一度

● Mac
● Google Chrome
● アニメーションの上下左右いずれかの動き (イージング)

という条件下で

● アンチエイリアスが効かない(全部ではなく一部)

いずれ修正されるとは思いますが どうにも気になる方は
該当の
-webkit-font-smoothing: antialiased;
を削除して頂くことで改善されます
そもそも「適用しない」という作業ですので アンチエイリアス自体が最初から指定されていない
という回避策(本末転倒)
あるいはアニメーションを排除するか

また状況確認しつつお伝えしようと思います