NEW 164312
positioning of top not compensating rounding of height
https://bugs.webkit.org/show_bug.cgi?id=164312
Summary positioning of top not compensating rounding of height
Peter Krautzberger
Reported 2016-11-02 01:37:32 PDT
Reduced test case at http://codepen.io/pkra/pen/mEqOGx. It displays an "x" with a red background and next to it a span that has display:inline-block. Inside that inline-block are two spans with display:block, the second one being an "x" on the pink background, and the first a span with a thin height and green background. These should be stacked vertically, and the whole in-line block should be aligned on the baseline of the bottom span in the inline-block. (The test case adds the computed values of bottom/height/offset for convenience.) The expected behavior would be that the two x's should be aligned. However, the two x's are not aligned. This works as expected in Firefox and IE8+. Related Blink bug at https://bugs.chromium.org/p/chromium/issues/detail?id=661468
Attachments
IFC without forcing integral baseline (240.87 KB, image/png)
2022-07-14 20:26 PDT, alan baradlay
no flags
Brent Fulgham
Comment 1 2022-07-14 16:55:01 PDT
None of the browsers appear to have the 'x's aligned in the first set of two X's. Is this test case valid?
alan baradlay
Comment 2 2022-07-14 20:25:15 PDT
(In reply to Brent Fulgham from comment #1) > None of the browsers appear to have the 'x's aligned in the first set of two > X's. Is this test case valid? It is a valid case. WebKit fails to align inline-block content at non-integer baseline positions. The fix is simply to remove all the integral floor/ceil/round in inline/block layout. I just did that (it's a rather involved and intrusive change) and the attached test case started working.
alan baradlay
Comment 3 2022-07-14 20:25:27 PDT
^^
alan baradlay
Comment 4 2022-07-14 20:26:48 PDT
Created attachment 460920 [details] IFC without forcing integral baseline
alan baradlay
Comment 5 2022-07-15 07:42:57 PDT
"at non-integer baseline positions" should read "at non-integral baseline position"
Ahmad Saleem
Comment 6 2022-11-12 15:29:10 PST
** Safari 16.1 ** span1: top: 8 bottom: 38.5 height: 30.5 offsetHeight: 31 span2: top: 8 bottom: 38.484375 height: 30.484375 offsetHeight: 30 ** Safari Technology Preview 157 ** span1: top: 8 bottom: 38.5 height: 30.5 offsetHeight: 31 span2: top: 8 bottom: 38.484375 height: 30.484375 offsetHeight: 30 *** Chrome Canary 109 *** span1: top: 8 bottom: 38 height: 30 offsetHeight: 30 span2: top: 8.0078125 bottom: 38 height: 29.9921875 offsetHeight: 30 *** Firefox Nightly 108 *** span1: top: 8 bottom: 39.30000305175781 height: 31.300003051757812 offsetHeight: 31 span2: top: 8 bottom: 39.30000305175781 height: 31.300003051757812 offsetHeight: 31
Note You need to log in before you can comment on or make changes to this bug.