text-overflow:ellipsis glitchy on <input> elements
Categories
(Core :: Layout: Form Controls, defect)
Tracking
()
| Tracking | Status | |
|---|---|---|
| firefox-esr115 | --- | unaffected |
| firefox-esr140 | --- | unaffected |
| firefox-esr153 | --- | verified |
| firefox152 | --- | wontfix |
| firefox153 | --- | wontfix |
| firefox154 | --- | verified |
People
(Reporter: tyr.asd, Assigned: emilio)
References
(Regression)
Details
(Keywords: regression)
Attachments
(4 files)
User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:151.0) Gecko/20100101 Firefox/151.0
Steps to reproduce:
This regressed in Firefox 151.
Open following [test html](data:text/html;charset=utf-8,<!doctype html><body><input value="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit." style="text-overflow:ellipsis;"/></body>): An input element with a relatively long value, and text-overflow: ellipsis.
<input value="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit." style="text-overflow:ellipsis;"/>
Tested on Linux and Windows. The bug is also present in Firefox beta 152 and nightly 153.0a1 (2026-06-15) (64-Bit).
This was originally reported as https://github.com/openstreetmap/iD/issues/12408
Actual results:
The ellipsis is not rendered at first (the text is just clipped), and if one scrolls through the input element by putting the cursor inside it and pressing the right arrow key, eventually the ellipsis is rendered, but the rest of the text value isn't.
See attached screencast video.
Expected results:
The ellipsis should be shown from the start and the text be rendered correctly while scrolling through the input field text.
|
||
Comment 1•2 months ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::Layout: Form Controls' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
|
|
||
Comment 2•2 months ago
|
||
The severity field is not set for this bug.
:boris, could you have a look please?
For more information, please visit BugBot documentation.
|
||
Comment 3•1 month ago
|
||
We've also noticed this bug, especially with different languages that more easily overflow the input width.
Just to restate:
- Ellipsis is not present initially.
- Moving the cursor in either direction and hitting the left/right edges can cause the input to go blank and display the overflow ellipsis.
An additional repro: https://codepen.io/editor/isaacbraun/pen/019e8fc2-d603-75a6-860f-af3eda1e4963
Regression window:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=02376ed8674012d2bd575682466cc9177039adb9&tochange=a77a08b9be8a059936afa68f259adb86823bb75f
:emilio, could you take a look?
|
Assignee | |
Updated•1 month ago
|
|
|
||
Comment 5•1 month ago
|
||
Set release status flags based on info from the regressing bug 2031757
|
|
Assignee | |
Comment 6•1 month ago
|
||
This is somewhat similar to bug 2045660, except I don't think we can make it work without special-casing.
|
|
Assignee | |
Comment 7•1 month ago
|
||
|
|
Assignee | |
Comment 8•1 month ago
|
||
Unfortunately, I think we need to special-case this, since we don't want
to set overflow: clip on the internal editor like we do for
::placeholder.
Draw the ellipsis only when the input is not scrolled, which matches
other browsers and is simpler (otherwise the ellipsis would scroll).
Fix the caret check to deal with shadow dom, which would've kinda saved
us a bit here.
|
||
Updated•1 month ago
|
|
|
||
Comment 10•1 month ago
|
||
Forgot to mention this bug is observed on: 152.0.6 (aarch64), MacOS Tahoe 26.5.1 (25F80)
|
|
Assignee | |
Comment 11•1 month ago
|
||
Sure, it's reproducible across platforms, but we're not going to uplift the fix to 152.
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/61379 for changes under testing/web-platform/tests
|
||
Comment 13•1 month ago
|
||
| bugherder | ||
Upstream PR merged by moz-wptsync-bot
|
||
Updated•1 month ago
|
|
||
Comment 15•1 month ago
|
||
Worth requesting uplift to Beta (153) and esr153, perhaps?
|
|
Assignee | |
Comment 16•1 month ago
|
||
Beta is 154 which has the fix right? But sure.
|
|
Assignee | |
Comment 17•1 month ago
|
||
Unfortunately, I think we need to special-case this, since we don't want
to set overflow: clip on the internal editor like we do for
::placeholder.
Draw the ellipsis only when the input is not scrolled, which matches
other browsers and is simpler (otherwise the ellipsis would scroll).
Fix the caret check to deal with shadow dom, which would've kinda saved
us a bit here.
Original Revision: https://phabricator.services.mozilla.com/D312691
|
||
Updated•1 month ago
|
|
|
||
Comment 18•1 month ago
|
||
(In reply to Emilio Cobos Álvarez [:emilio] from comment #16)
Beta is 154 which has the fix right? But sure.
Uh, yeah, sorry - I can't count.
|
|
||
Updated•1 month ago
|
|
||
Updated•1 month ago
|
|
||
Comment 20•1 month ago
|
||
| uplift | ||
|
||
Comment 21•1 month ago
|
||
Hello! I can confirm that the issue is fixed with firefox 154.0b6 153.1.0esr on Ubuntu 24.04 and MacOS 15.7.7.
I will update the flags and status of this issue accordingly.
Have a nice day
|
||
Updated•1 month ago
|
Description
•