Bug 219280 – REGRESSION (?): Presence of whitespace after a hidden inline element moves the baseline

• Status: RESOLVED
• Resolution: FIXED
• Component: Layout and Rendering

[Kit Grose]

Created attachment 414852 [details]
HTML file demonstrating the issue

Relatively recently, a WebKit change introduced a change to the way the baseline is computed which visually broke the navigation on a website I work on.

After much experimentation, the issue seems to be that the presence of any whitespace following an inline element styled with `display: none` moves the baseline for that item, such that the surrounding `inline-block` elements no longer visually align to the baseline. Making the inline element visible corrects the problem, as does trimming the whitespace that follows it. The obvious workaround is to set `vertical-align` to any value other than `baseline`, which does correct the issue in this case.

I've been unable to get the WebKit Build Archives to run on my Mac to confirm if it affects the latest builds of WebKit, and the Safari Technology Preview no longer runs on Mojave, but I have been able to get a friend to confirm the issue affects Safari 10.14 in macOS 11 (Big Sur) too. I have confirmed that the issue does not affect Firefox nor Chrome.

Please find a trivial reproduction example attached. Boxes A and B should be aligned.

[Kit Grose]

Created attachment 414853 [details]
Screenshot of the output of the HTML test case

I've attached a screenshot of the output of the test case.

[Radar WebKit Bug Importer]

<rdar://problem/71808556>

[Simon Fraser (smfr)]

I can reproduce this in STP 110 but not in more recent builds.

[Simon Fraser (smfr)]

Seem to be related to whether Next-gen line layout integration is enabled.

[Simon Fraser (smfr)]

This is behaving correctly in recent trunk builds. Please test in the next Safari Tech Preview.

[alan]

progressed at r268821 (http://trac.webkit.org/changeset/268821/webkit)