I was experimenting with text layout and have encountered an inconsistency I don't understand: WebKit browsers (i.e. Chrome/Edge) calculate the height of a block level <p> differently at 100% zoom than Gecko (Firefox). Sample pen at https://codepen.io/andrewhaw/pen/KKNaMNG
In Firefox, the calculated height of the <p class="intro"> is 25.6px, which makes sense as line-height: 1.6; 16px (my base font-size) * 1.6 = 25.6px. I have a visual sample of Firefox rendering and the computed box model in Firefox.
In WebKit (tested both Chrome/Edge), the calculated height of the <p class="intro"> is 44.5278px with the same base font-size set. This is where I am obviously missing something about how WebKit calculates sizes. I have a visual sample of the Chrome rendering and the computed box model in Chrome from the previously linked CodePen.
I have tried this on various Windows machines with the same result (I don't have access to any Macs). I do understand that expecting all rendering engines to output the same result is not in keeping with a flexible/responsive design approach, but I am mostly wondering if someone else has any suggestions on why this might be, as I must be missing something at this point.