| Summary: | REGRESSION (?): Presence of whitespace after a hidden inline element moves the baseline | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Kit Grose <kit> | ||||||
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> | ||||||
| Status: | RESOLVED FIXED | ||||||||
| Severity: | Normal | CC: | bfulgham, simon.fraser, webkit-bug-importer, zalan | ||||||
| Priority: | P2 | Keywords: | InRadar | ||||||
| Version: | Safari 14 | ||||||||
| Hardware: | Mac | ||||||||
| OS: | macOS 10.14 | ||||||||
| See Also: | https://bugs.webkit.org/show_bug.cgi?id=218044 | ||||||||
| Attachments: |
|
||||||||
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.
I can reproduce this in STP 110 but not in more recent builds. Seem to be related to whether Next-gen line layout integration is enabled. This is behaving correctly in recent trunk builds. Please test in the next Safari Tech Preview. progressed at r268821 (http://trac.webkit.org/changeset/268821/webkit) |
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.