Search code examples
htmlcssgoogle-chromeresponsiveness

One pixel added between block elements in Chrome responsive mode

When testing site responsiveness in Chrome responsive mode, there is 1px added between elements out of nowhere. It all looks good on Firefox, but on Chrome, on responsive breakpoints there is 1px which can be fixed by adding -1px negative margin-top.

Where does it come from?

One can reproduce the issue by stacking any block elements one below another and checking out the page in Chrome responsive mode.

For example, the following snippet:

html,
body {
  margin: 0 auto;
}

div {
  background: purple;
  height: 200px;
}
<div>One</div>
<div>Two</div>

When viewed in normal mode looks all good, but when viewed in Chrome responsive mode with let's say will output the following image:

Responsiveness issue

You can see the slight white line between the two div elements, which are not glued together but are 1px apart. Any idea why does this happen on Chrome browser only?

Solution

  • This is how antialiasing works. When your div is displayed at 100% scale, it will always have a height of 200px. The last row of pixels from the top div will be perfectly opaque, as will be the first row of pixels from the bottom div.

    When displayed at a different scale (because you're emulating another device or because you zoom-in/out), if the div's height results in decimal pixels, Chrome renders a semi-transparent pixel, which gets a transparent layer from each of the divs, according to the position of the limit.

    However, two transparencies do not make it opaque! Therefore, because the background is white, that line of pixels is slightly brighter.

    In order to prevent this behavior you could add 

    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">

    in the <head> tag of your page, which disables the ability to zoom-in/out on a large number of devices.

    More on the responsive meta tag in this article.

    If you want to make sure the white line never shows up, you can add the margin-top: -1px to the bottom one or margin-bottom: -1px to the top one. I also advise against disabling zoom-in/out, which greatly impairs usability.

    Chrome will never apply a negative margin to account for this, as it is mathematically incorrect and would break other cases, where transparency approximation works perfectly fine. In all fairness, it actually is the best optical approximation for sub-pixel rendering.