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

まず原因究明

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

その際に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の値を指定する
    });
  }
});

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