Created attachment 237291 [details] test case 1 An inline-block with em based padding whose computed value is *not* an integer is offset by a 2~3 px from the dominant baseline. The inline-block is positioned lower than it should be, and misaligned with the inline content that surrounds it. In the test case: the inline-block has a light green background and a padding of 0.35em (computed value: 5.6px); the dominant baseline is represented by the red line. If I change padding to .375em, the inline-block is aligned correctly.
Created attachment 237292 [details] Screenshot Pixie screenshot of test case 1
Created attachment 237293 [details] test case 2 (requires Ahem) This is basically the same as test case 1, but using the Ahem font. Notice the gap under the red line (dominant baseline) and the different size of the inline-block vs the inline-span.
Created attachment 280635 [details] This is still a problem in the latest WebKit nightly, r201711
Created attachment 280636 [details] By contrast, this has been fixed in Chrome 50
I’ve just run into this issue myself and spent quite a long time trying to get a few elements aligned. Additionally, I noticed that `<button>` have a different offset from the dominant baseline than other inline-block elements (e.g. a `<span>`), even when they have `-webkit-appearance: none` set. Giving a `<span>` `display: inline-flex` makes it behave like the `<button>`, but still doesn’t fix the overall issue. FWIW, I initially encountered this issue in a flexbox that contained a mix of spans and buttons, so it’s not just an issue for normal inline layout. I can attach my reduced test-case with buttons if it’s helpful.
Seems to work fine with WebKit ToT (265630@main) using MiniBrowser (Ahem one) and match Chrome Canary 117, I think we can close this.
Created attachment 466876 [details] 265546@main This still looks broken to me.
(In reply to zalan from comment #7) > Created attachment 466876 [details] > 265546@main > > This still looks broken to me. I used Ahem one, might have missed while doing CMD + Tab. Good catch!