219280 2020-11-24 14:54:50 -0800 REGRESSION (?): Presence of whitespace after a hidden inline element moves the baseline 2020-12-01 16:52:23 -0800 1 1 1 Unclassified WebKit Layout and Rendering Safari 14 Mac macOS 10.14 RESOLVED FIXED https://bugs.webkit.org/show_bug.cgi?id=218044 InRadar P2 Normal --- 1 kit webkit-unassigned bfulgham simon.fraser webkit-bug-importer zalan oldest_to_newest 1710025 0 414852 kit 2020-11-24 14:54:50 -0800 Created attachment 414852 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. 1710026 1 414853 kit 2020-11-24 14:57:13 -0800 Created attachment 414853 Screenshot of the output of the HTML test case I've attached a screenshot of the output of the test case. 1710639 2 webkit-bug-importer 2020-11-30 09:31:10 -0800 <rdar://problem/71808556> 1710660 3 simon.fraser 2020-11-30 10:17:01 -0800 I can reproduce this in STP 110 but not in more recent builds. 1710661 4 simon.fraser 2020-11-30 10:20:18 -0800 Seem to be related to whether Next-gen line layout integration is enabled. 1711046 5 simon.fraser 2020-12-01 08:50:08 -0800 This is behaving correctly in recent trunk builds. Please test in the next Safari Tech Preview. 1711209 6 zalan 2020-12-01 16:15:23 -0800 progressed at r268821 (http://trac.webkit.org/changeset/268821/webkit) 414852 2020-11-24 14:54:50 -0800 2020-11-24 14:54:50 -0800 HTML file demonstrating the issue webkit-line-height-bug.html text/html 371 kit PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHRpdGxlPldlYktpdCBsaW5lLWhl aWdodCBidWc8L3RpdGxlPgogICAgPHN0eWxlPgogICAgICBkaXYgewogICAgICAgIGRpc3BsYXk6 IGlubGluZS1ibG9jazsKICAgICAgfQoKICAgICAgcCB7CiAgICAgICAgYm9yZGVyOiAxcHggc29s aWQgcmVkOwogICAgICB9CgogICAgICBzcGFuIHsKICAgICAgICBkaXNwbGF5OiBub25lOwogICAg ICB9CiAgICA8L3N0eWxlPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXY+CiAgICAgIDxwPkE8 L3A+CiAgICA8L2Rpdj4KICAgIDxkaXY+CiAgICAgICAgPHA+QiA8c3Bhbj48L3NwYW4+IDwvcD4K ICAgIDwvZGl2PgogIDwvYm9keT4KPC9odG1sPgo= 414853 2020-11-24 14:57:13 -0800 2020-11-24 14:57:13 -0800 Screenshot of the output of the HTML test case sample-output.png image/png 554 kit iVBORw0KGgoAAAANSUhEUgAAAC0AAAApCAIAAAAu6TfbAAAB8UlEQVR4AWL4PzgAoP06gFAkCuMA Xgm1miKb0shUEqmgCEoMCUISAZACxIkggQoAUSoQCcAABM5UCAoIUhCkQJBQuHJ/u24tztw2Mzew 7zPy+jTv/Xrf+9R8bwdxEAdx/KLof14KOUR/gDiEHcKVFq43//LKsqxKpdJoNKFQyOFw+P3+Uqm0 Wq3EO0RsAN5eLhetVut0Ot8z2+2WYRiDwXA8HhV14JWiKLfb/ZGsVCrYIY7j5HEcDgcRjvv9nkgk sEObzUYeRyAQmEwmX3SYTKZut1uv12OxmE6na7Va8pyP2WyGvU2n0190mM3mRqORyWRomjYajRhf r1cZHNls1ufzoQt2u92z56NQKOA79Pt9qY79fh8Oh+fzOaYrl8vPOhaLBW5EG0t11Gq1Xq+HQTAY ROHRmU853muaSqUkOW63m8vlOp/PGOPoYcZOpyPgOJ1OarXaarU+Hg9k1ut1PB7HXcPhUJJjNBrZ 7fYfb5HP5zGj1+vFGn91/Hx5jUajqrdgGMZisdhsNpZlB4OB1H6JRCLtdpv7E8lkEmuMx2OBugiE SMdyuUSbfM5Pp1M4oFHUkcvlqtXq5zwqgjKBAqJCjmKxiPU8Hg/P8x/5ZrOp1+uRx+EFRQmHuN85 4Ushh/ggjv/zv5A8RxEHcRAHcfwGNvOkrME2BjAAAAAASUVORK5CYII=