Bug 305729

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>