UserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

Example URL:
http://jdh.nfshost.com/flexbox.html

Steps to reproduce the problem:
1. Visit http://jdh.nfshost.com/flexbox.html
2. The lines around and between the text at the top should all be one pixel thick
3. The line to the right of "All posts" is two pixels thick (depending on your window size etc.)

What is the expected behavior?
The rightmost line should be 1 pixel think, since the element has a margin-right of 1px.

What went wrong?
The rightmost line is 2 pixels thick.

Resizing the window horizontally a pixel at a time causes the line to flip between being 1px and 2px wide; zooming in causes some of the other lines to become too thick as well, and zooming out sometimes causes some lines to disappear.

Does it occur on multiple sites: N/A

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 56.0.2924.87  Channel: stable
OS Version: Ubuntu 16.04
Flash Version: Shockwave Flash 24.0 r0

It works at some other zoom levels, with other fonts, and with other text. Some values of max-width work (e.g. 670px), others don't (672px); likewise, some browser widths cause the issue and others don't -- a browser window an even number of pixels wide causes the 2px border for me.

Works in Firefox 51.0.1 at 100% zoom, although zooming causes similar issues to Chromium.

It seems to be caused by the margins on either side of the body not being integers; when the window is sized so that body has integer margins, the issue does not appear, but when the window increases in width by 1px (so that the margins on each side increase by 0.5px), the issue manifests. However, if the body is e.g. 670px wide, the issue does not occur, even when the margins are not integers.

 

Deleted: chromium_margins_pixel_error.png 65.9 KB

	chromium_margins_pixel_error.png 65.9 KB View Download