【CSS】transitionプロパティ使用時に、Chromeブラウザで1pxずれる現象を回避する | バシャログ。
先週インフルエンザに感染して、ダウンしてました ishida です。 今年のインフルエンザは感染力がかなり強いようで、 次女→自分→長女→嫁（いまココ）と感染してしまいインフル一家となってしまいました。。。 助けてぇ〜。 急な高熱・のどの痛み・関節痛などの症状がでたら、すぐ病院に行きましょうね。 さて今回は、先日コーディング中に遭遇したChromeブラウザのみにおきた現象を回避するための Tips を紹介します。 最近のHTMLコーディングでは、ボタンなどのマウスオーバーエフェクトを CSS で対応することが多いです。よく使うのは、以下のようなものです。 ソースコード HTML <p class="button"><a href="#"><img src="hogehoge.png" alt="ボタン" width="300" height="80"></a></p> .button {
リキッド＋css3 transform,transition or jquery animateで Chromeさんのレンダリングがアホになる時 – hirokonaBlog
リキッド＋css3 transform,transition or jquery animateで Chromeさんのレンダリングがアホになる時 リキッドや拡大縮小のあるデザインではChromeさんが急にアフォになるという悲しいバグ 具体的にはpositionとか動かしてないのにマウスオーバーで位置が1px左にずれたり、他の要素のマウスオーバーで別の要素がカクついたりします。 常になるのではないのでウィンドウサイズとかで一定の条件を満たしてしまうとなるのだと思います。 ウインドウサイズ奇数とか、％でwidth指定している要素の表示位置が奇数とかじゃないかと睨んでいるのですが 原因も対処方法も不明 だがしかしこれで治ったみたい [html] body { -webkit-backface-visibility: hidden; backface-visibility: hidden; } [
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
