[Webkit-unassigned] [Bug 219280] New: Presence of whitespace after a hidden inline element moves the baseline

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=219280

            Bug ID: 219280
           Summary: Presence of whitespace after a hidden inline element
                    moves the baseline
           Product: WebKit
           Version: Safari 14
          Hardware: Macintosh
                OS: macOS 10.14
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: kit at studioiq.com.au
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

Created attachment 414852

  --> https://bugs.webkit.org/attachment.cgi?id=414852&action=review

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.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20201124/d9f2b30f/attachment.htm>