Broken baseline Grid in Chrome (80.0.3987.106)

[dtwardy]

The baseline grid doesn't work (properly) in Google Chrome in the current version (at least). Having it side by side in Chrome and Firefox the text slowly but steadily shifts itself upwards away from the baseline. Inspecting the computed CSS in both cases indicate to wrongly computed heights.

I set up Edge (v. 44.18362.449.0), Firefox (v. 73.0) and Chrome (v. 80.0.3987.106 ) to emulate a viewport of 1024x768. The section#baseline element differed in all three browsers in height: 8024px (Firefox), 7957.920px (Chrome), 8051.2px (Edge). Going in deeper and comparing element heights:

object selector	Edge (height)	Edge (padding-top)	Edge (margin-top)	Edge (margin-bottom)	Edge (offset-top)	Chrome (height)	Chrome (padding-top)	Chrome (margin-top)	Chrome (margin-bottom)	Chrome (offset-top)	Firefox (height)	Firefox (padding-top)	Firefox (margin-top)	Firefox (margin-bottom)	Firefox (offset-top)
.single h1	61.88px	10.88px	0px	5.95px	68px	50.4px	10.9px	0px	5.95px	xxx	51px	10.9px	0px	6.1px	xxx
.single p.cation	45.39px	11.39px	-17px	22.44px	119px	33.6px	11.525px	-17px	22.475px	xxx	34px	11.5333px	-17px	22.4667px	xxx
.single p:nth-child(2)	146.37px	10.37px	0px	23.46px	187px	134.4px	10.5px	0px	23.5px	xxx	136px	10.5px	0px	23.5px	xxx

I could go on but the result is that grid is visibly broken when showing the baseline grid and the error accumulates quickly. In Edge there's also some error but the deviation is very small and only shows further down the site significantly (especially visible from the horizontal separator line onwards). Since everything sticks nicely to the baseline grid in Firefox this has to be a browser specific issue. Obviously the height deviation at the height property between Edge and the rest is due to the alternative box model including the padding (resulting in the same corrected height properties) but then the margins don't line up and destroy the grid align.

Any thoughts on this?

[raratiru]

I just landed on this project, thank you for the heads up.

The alternative is to try there:

https://github.com/jhildenbiddle/vertical-rhythm-reset