背景境界や画像間の隙間を無くしたい！

不具合事象

背景画像のつなぎ目で1px以下の白線やグレー線がでる場合があります。
デザイン的にNGのなので、何とか解消したいものです。

原因

画像（img）はインライン要素なので、行ボックスのベースライン分だけ下部に余白が出ます。

また、レスポンス時に例えば、100pxの画像が99.6pxなどの小数点になった時に、0.4px分をどう描画（サブピクセル描画）するかがブラウザによって違うようです。

Chrome は 0.3px の薄い線を“グレー”で補完して表示する。
Firefox は整数に丸める。両者で微妙に違う見た目（1pxの白線など）が出るようです。

対策

以下のような対策がありますが、ケースに応じて使い分けてください。

• display:block; inlineのベースラインずれを防ぐ
• line-height:0; 行ボックス由来のズレ防止
• overflow:hidden; 小数点のはみ出しを隠す
• transform: translateZ(0);GPUで整数化されることもある
• margin-bottom:-1px; 視覚的に食い込ませて隠す

事例

私が経験した事例で基本の背景画像が黄色の背景色に白色の水玉模様があり、セクションの境界が波形になっているデザインがありました。
この境界に1pxの隙間が生じていました。

■html
<section class="information">
<div class="information__inner ">
 
 略

<div class="cta-bg cta-bg--upper"><img src="./img/cta-upper-bg.png" alt="背景・波線" width="2396" height="105"></div>
<!-- <div class="cta-bg cta-bg--upper"></div> -->
 </section>

<!-- cta -->
<section class="cta">
<div class="cta__inner ">

略
    
</div>
 </section>

body {
  background-image: url(../img/bg-cards.png);
  background-repeat: repeat-y;
}

.cta-bg--upper {

  margin-bottom: -2px;   // 背景とCTAを2pxだけ重ねる
}

このケースの場合、display:block;では効果がなく、margin-bottom:-1px;でchromでは白線が解消しました。しかし、Firefoxではレスポンス時の中間サイズで発生してmargin-bottom: -2px;を適用するとやっと解消しました。