リキッドや拡大縮小のあるデザインではChromeさんが急にアフォになるという悲しいバグ
具体的にはpositionとか動かしてないのにマウスオーバーで位置が1px左にずれたり、他の要素のマウスオーバーで別の要素がカクついたりします。
常になるのではないのでウィンドウサイズとかで一定の条件を満たしてしまうとなるのだと思います。
ウインドウサイズ奇数とか、％でwidth指定している要素の表示位置が奇数とかじゃないかと睨んでいるのですが
原因も対処方法も不明
だがしかしこれで治ったみたい
[html]
body {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
[/html]
CSS3 transform rotate causing 1px shift in Chrome
http://stackoverflow.com/questions/14729492/css3-transform-rotate-causing-1px-shift-in-chrome
どういうことだってばよ。。。。
コメント
“リキッド＋css3 transform,transition or jquery animateで Chromeさんのレンダリングがアホになる時” への2件のフィードバック
私もクロムのズレ問題と小一時間格闘しまして、
主にインライン要素でおきるのではと思っております。
とりあえず、記事の指定では、直せず、
css transitionを指定した要素{display:inline-block;}
で直せました。
-webkit-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
hoverじクロムで1px右ずれ現象起きてました。
ga_i_jinnさん
おおお！インラインブロックで…！
貴重な情報ありがうございます＆お役に立てなかったのに教えて頂いてありがとうございます！！
とりいそぎ！