投稿日:2013年8月9日

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

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

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

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

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

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件のフィードバック

  1. ga_i_jinn

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

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

    で直せました。

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

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

    返信
    1. hihihi 投稿作成者

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

      返信

コメントを残す

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

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