Bug 158441
| Summary: | Misaligned inline-block due to fractional padding/margin/other vertical spacing | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Han <laughinghan> |
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Normal | CC: | ahmad.saleem792, bfulgham, simon.fraser, webkit-bug-importer, zalan |
| Priority: | P2 | Keywords: | BrowserCompat, InRadar |
| Version: | WebKit Nightly Build | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
| URL: | https://jsfiddle.net/vu71job4/show | ||
| See Also: | https://bugs.webkit.org/show_bug.cgi?id=261212 | ||
| Bug Depends on: | 133932 | ||
| Bug Blocks: | |||
Han
Tested on WebKit Nightly r201711
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/602.1.36+ (KHTML, like Gecko) Version/9.1.1 Safari/601.6.17
# Example URL:
http://output.jsbin.com/tivuvov
# Steps to reproduce the problem:
1. Open http://output.jsbin.com/tivuvov
2. See misaligned x and 2
# What is the expected behavior?
x and 2 should always line up, because according to the CSS 2.1 spec:
The baseline of an 'inline-block' is the baseline of its last line box in the normal flow
https://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align
Firefox 46 displays the correct behavior.
# What went wrong?
At certain fractional values of padding or margin, the x and 2 are misaligned, for example .3em.
# Notes
Safari 9.1.1 and Chrome 50 have the same problem, at I think all the same fractional values, but the misalignment is much more severe.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Han
Cross-ref: https://bugs.chromium.org/p/chromium/issues/detail?id=617763
Han
Before reporting this bug I did find an existing bug that appears similar, [Subpixel layout: Inline-block is offset from dominant baseline with em based padding](136332), but unlike this bug, 136332 has been fixed in Chrome, whereas this bug is *worse* in Chrome.
[136332]: https://bugs.webkit.org/show_bug.cgi?id=136332
Ahmad Saleem
Took reduced test case from Chrome bug: https://jsfiddle.net/vu71job4/show
^ I am able to reproduce using above in WebKit TOT (265630@main). Both Chrome Canary 117 and Firefox Nightly 116 have both 'x' (xx) with proper baseline and no issue in alignment.
Radar WebKit Bug Importer
<rdar://problem/122587250>