User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36 Steps to reproduce: I have a ul to which I am applying columns: 3 to. Each li has an input/custom label. The custom label has the following relevant css. Note the custom label checkbox is being made with FontAwesome5 input[type="checkbox"] + label:before { content: ''; display: block; width: 16px; height: 16px; border: 1px solid black; border-radius: 2px; position: absolute; background-color: white; left: 0; top: 5px; } Actual results: The height 16px is still being applied to the element, but is actually getting rendered as over 18px when I inspect the element. All others are exactly 16px. This only seems to happen at the top of the last column. If I go in to the inspector and click on the height to disable it and then reenable it, it renders perfectly. Have tried adding !important (god help us) to the height, and adding a min-height. Expected results: No visual bug on the last column should appear.

Could you please attach a self-contained minimal testcase as HTML including CSS? Thanks.

I can reproduce the layout problem on Windows10 Noghtly62.0a1 x64. And this has been regressed since 56.

Regression window: https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=e6e712904806da25a9c8f48ea4533abe7c6ea8f4&tochange=d6bf703c5deaf1e328babd03d5e68ff2a4ffe10e Via local build, Last good : 395b6c53e42b First bad : 1e3130e96f03 Regressed by: 1e3130e96f03 L. David Baron — Bug 1308876 - Mark child frames as dirty before starting reflow of the parent, so that if we reflow a child twice, it's only dirty the first time. r=dholbert