hirokonaBlog

ググる→忘れそう→即時メモ　京都のWebデザイナーの備忘録

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

リキッドや拡大縮小のあるデザインでは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

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

投稿日

カテゴリー:

,

投稿者:

hihihi

タグ:

,

コメント

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

  1. ga_i_jinnのアバター
    ga_i_jinn

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

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

    で直せました。

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

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

    返信
    1. hihihiのアバター
      hihihi

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

      返信

ga_i_jinn へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。