Bug 284677 – Text does not always align across multiple columns

• Status: NEW
• Component: Layout and Rendering

[Brad Andalman]

Created attachment 473568 [details]
HTML that exhibits the incorrect text layout in Safari

When you have text in multiple columns, the baselines of the text should match from one column to the next. However, in some cases, this doesn't happen. I've attached a simple HTML file that illustrates this. 

If you call getClientRects() on the <span> in the HTML, the returned array will consist of two DOMRects, each with diffferent "top" values. Since each line is the first line in its own column, they should be the same. And, in fact, they are the same value when I open the HTML in Chrome, Firefox, and Edge.

I will also attach a screenshot that shows the rendered HTML in Safari, Chrome, and Firefox. Even though it's just a pixel difference, it should be easy to see the incorrect alignment in Safari, and the correct alignment in the other browsers.

[Brad Andalman]

Created attachment 473569 [details]
A screenshot showing the incorrect behavior in Safari, and the correct behavior in Chrome and Firefox

[Karl Dubost]

Confirmed there is a slight shift, that we can better see when when adding to span 

```
span {
    background-color: lightgray;
    border-block-end: 1px solid red;
}
```

Note also that this is highly dependent on relative line-height and font size.

[Radar WebKit Bug Importer]

<rdar://problem/141853264>