リキッド＋css3 transform,transition or jquery animateで Chromeさんのレンダリングがアホになる時

リキッドや拡大縮小のあるデザインではChromeさんが急にアフォになるという悲しいバグ
具体的にはpositionとか動かしてないのにマウスオーバーで位置が1px左にずれたり、他の要素のマウスオーバーで別の要素がカクついたりします。

常になるのではないのでウィンドウサイズとかで一定の条件を満たしてしまうとなるのだと思います。
ウインドウサイズ奇数とか、％でwidth指定している要素の表示位置が奇数とかじゃないかと睨んでいるのですが

原因も対処方法も不明
だがしかしこれで治ったみたい

body {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	
}

どういうことだってばよ。。。。

「リキッド＋css3 transform,transition or jquery animateで Chromeさんのレンダリングがアホになる時」への2件のフィードバック

ga_i_jinn 2014年1月16日 6:47 PM

私もクロムのズレ問題と小一時間格闘しまして、
主にインライン要素でおきるのではと思っております。
とりあえず、記事の指定では、直せず、

css　transitionを指定した要素{display:inline-block;}

で直せました。

-webkit-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;

hoverじクロムで1px右ずれ現象起きてました。

返信 ↓

hihihi 投稿作成者2014年1月22日 12:27 PM

ga_i_jinnさん
おおお！インラインブロックで…！
貴重な情報ありがうございます＆お役に立てなかったのに教えて頂いてありがとうございます！！
とりいそぎ！

返信 ↓

hirokona