Bug 305729 – English text getting cut off in RTL with some styles

• Status: NEW
• Component: Layout and Rendering

When rendering text where each of the following are true:

1. dir="rtl" is set on a parent.
1. The text ends in "r."
2. The text is rendered in a flex container
3. A "::before" pseudoelement with "display: inline-block;" is on the text.
4. The text has "overflow: hidden; text-overflow: ellipsis;" set.

the overflow condition is wrongfully triggered and text cut off as a result. 

This was discovered when testing our salutation combobox with RTL in Safari - options like "Mr." and "Dr." were getting cut off, while "Mrs." and "Ms." were not. Further experimenting indicated that the flex container and a pseudoelement with "display: inline-block;" were also prerequisites for the bug. First identified in Safari 18 on macOS 15. Still present after upgrading to both Safari 26 and macOS 26.

Codepen with repro at https://codepen.io/roxanne-baker/pen/ByKmxNK, or using below text - you'll see that the LTR text is not cut off while the RTL is. Try replacing "Mr." with other text - combinations ending in "r." get cut off, while other letter combinations do not appear to result in any cut off.


<style>
    div.rtl {
        direction: rtl;
    }
    div {
        display: flex;
    }
    p {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    p::before {
        content: '';
        display: inline-block;
    }
</style>
<div>
    <p>Mr.</p>
</div>
<div class="rtl">
    <p>Mr.</p>
</div>

[Ahmad Saleem]

*** Safari Technology Preview 235 ***

Second line shows `...r` (on right side)

*** Chrome Canary 146.0.7640.0 (Official Build) canary (arm64) ***

Second line shows `.Mr` (on right side)

*** Firefox Nightly 149 (20260118214518) ***

Second line shows `.Mr` (on right side)

[Radar WebKit Bug Importer]

<rdar://problem/168875614>

[Karl Dubost]

Created attachment 478148 [details]
rendering in safari, firefox, chrome

Thanks roxanne for the bug with the test case.

[Karl Dubost]

Created attachment 478149 [details]
rendering in safari, firefox, chrome (more values)

consistently different for all values. 

I think there is probably already a bugzilla for this.