WebKit系のブラウザでボーダーがおかしくなる問題のまとめ【CSS】

関連タグ:

公開日:

最終更新日:

WebKit系のブラウザでボーダーがおかしくなる問題のまとめ【CSS】

かなり久々のブログです。
Laravelやプログラミング中心に書くというコンセプトの当ブログですが、最近はプログラミングよりもJSやMovableTypeを中心に作業しているので、かなり知識が遅れています。

今回はとりあえず間にあわせな感じではありますが、コーディングについての知見を書きとめておこうと思います。

ボタンのデザインやテーブル周りのコーディングをしているとよくぶち当たるのが「線が下の部分だけ消えている」「線がかすれて見える」と言った現象です。

実は以前からよく修正事項として上がってくることが多かったのですが、案外探しても見つからないことが多いので、とりあえず見つかった問題だけまとめておきます。

まず原因究明

最近ではソリッドデザインではなくリキッドデザインが標準と言っても過言ではないと思います。

その際にfont-sizeをvwに指定することが多いと思いますが、小数点が出るようなサイズ指定の状態(ウィンドウサイズによっては13.3pxになったりなど)になった時に発生するようでした。

ちなみにfont-sizeの指定が直接の原因というわけではなく、だいたいはline-heightの指定が主な原因です。

現在までで確認している限りでは、おそらくWebKit系ブラウザ特有の問題のようですが、outerwidthもしくはouterheightに小数点があるとこの問題に直面するようです。

対策

font-sizeもline-heightも小数点が出ないようにCSSを調整する

そりゃそうだろうというような解決方法ですが、小数点が出なければかすれたり消えたりすることもないので、小数点が出ないように組めば大丈夫です。

ただしデザインによって文字の段落ちが気になったり、そもそもの問題でリキッドデザインの場合は横幅が流動的なので左右の線だけが消えたりするケースも考えられます。
特にtableに関しては下や右だけボーダーが消えたりするので要確認ですね。

JS(jQuery)で解決する

結局のところこれが一番ブラウザ問題を吸収してくれる最善の策ですね。
わたしはjQuery派なのでコードもjQueryで紹介します。

ボーダーのかすれや消える現象が出ているエレメントに対して、現時点のheightを取得した後、heightの値をMath.floor()で四捨五入し、css()で指定をすると言った流れです。
今回はひとまず.btnと.table-cellに対して処理をしていきます。

jQuery(function($){
  var timer = false;
  fixedHeight();
  $(window).on('resize', function(){
    clearTimeout(timer);
    timer = setTimeout(function(){
      fixedHeight();
    }, 200);
  });
  function fixedHeight(){
    $('.btn,.table-cell').each(function(){
      $(this).css({'height' : ''}); //指定されているheightを解除
      var h = Math.floor($(this).outerHeight()); //現在のheightを取得
      $(this).css({'height' : h + 'px'}); //取得したheightの値を指定する
    });
  }
});

この処理をしておけば、リキッドデザインでもリサイズイベントを検知するたびに高さを自動的に取得してくれるので、リサイズ時に表示がおかしくなると言ったことはおそらくないと思われます。

まとめ

わたしは普段FireFoxを使っているので、コーディング時はシミュレータでしか確認していないのですが、実機で確認した時にこのような現象をまれに見るので、面倒でも必ず実機確認はするようにしています。

あまり頻繁に起こることではないのであえて紹介するほどでもないかもしれませんが、もしコーディング時にこのような現象になった場合の解決のきっかけにでもなればと思います。

関連記事