3

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?

Ivica Pesovski
  • 827
  • 7
  • 29
  • Testing it in lastest stable version of Chrome doesn't produce the same result, regardless of page zoom, device emulated, page size or pixel device ratio. Can you provide more details or a [mcve]? If it can't be reproduced, the chances of getting an answer are quite slim. Maybe you've got some extra CSS that's producing it. – tao Feb 25 '19 at 19:57
  • Nope, there is no other css at all. Here I created a simple demo that can be checked out: http://komardzija.site44.com/ I am using the latest Chrome as well. – Ivica Pesovski Feb 25 '19 at 20:15

1 Answers1

3

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.

tao
  • 82,996
  • 16
  • 114
  • 150
  • You need to add it in ``, which is the only valid parent for `` tags. – tao Feb 25 '19 at 20:43
  • [This](https://i.stack.imgur.com/Kqzsf.png) is what I get, @Dogukan, regardless of width. Try pressing Ctrl+0. – tao Feb 25 '19 at 20:50
  • @Dogukan, inspect the source of your codepen. It adds the `` in the ``. Where it doesn't work. See it [here](https://i.stack.imgur.com/A30hq.png). Using Chrome dev, select the tag and drag it into `` and you'll notice it starts working. – tao Feb 25 '19 at 20:53
  • I don't think it has anything to do with this mate. – doğukan Feb 25 '19 at 20:59
  • I can assure you it works in an actual web page. The question is not how to make it work in codepen, but in actual HTML. I answered the question, specified the cause and provided the fix, which, most likely, is more than enough for OP. You can test it by placing the meta tag manually on OP's example page. Is there anything I can help you with? – tao Feb 25 '19 at 21:00
  • you're right. at least a valid answer to this question. – doğukan Feb 25 '19 at 21:08
  • @DogukanCavus, I expanded my answer and also explained why it happens (technically). In all fairness, I think disabling zoom is far worse than the -1px solution but, of course, it depends on the case. – tao Feb 25 '19 at 21:10
  • I've worked hard on this before. thanks a lot for this explanation. – doğukan Feb 25 '19 at 21:14