Open Bug 1851397 Opened 6 months ago Updated 4 months ago

Select element text is cut off if letter-spacing / word-spacing are used

Categories

(Core :: Layout: Form Controls, defect, P3)

Firefox 117
defect

Tracking

()

Tracking Status
firefox-esr102 --- wontfix
firefox-esr115 --- fix-optional
firefox117 --- wontfix
firefox118 --- fix-optional
firefox119 --- fix-optional

People

(Reporter: annaphillipsnz, Unassigned)

References

(Regression)

Details

(Keywords: regression)

Attachments

(2 files)

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/117.0

Steps to reproduce:

Added CSS 2px of letter-spacing to a <select> element.

I found this question on Stack Overflow which has a demo of the issue:
https://stackoverflow.com/questions/75411603/why-firefox-doesnt-resize-correctly-the-select-tag-with-custom-letter-spacin

Actual results:

Text is cut off on the right.

Expected results:

Select element is extended to the width of the text so text is not cut off.

The Bugbug bot thinks this bug should belong to the 'Core::Layout' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Component: Untriaged → Layout
Product: Firefox → Core

Regression window(Although large zoom levels can break even the good build):
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=a5d7c6af687c94da40bca876b39d9cb962a9f4bb&tochange=518851d83f889a127fa56716a6f75a1e21d9adef

Suspect:
bd4c36e21201ebfeb8981030330c04d8fb77cc0d Emilio Cobos Álvarez — Bug 1762873 - Don't incorrectly add scrollbar size to select intrinsic size. r=jfkthame

Keywords: regression
Regressed by: 1762873

:emilio, since you are the author of the regressor, bug 1762873, could you take a look? Also, could you set the severity field?

For more information, please visit BugBot documentation.

Flags: needinfo?(emilio)

The real regressor here is bug 1744009.

The main issue is that this code doesn't account for letter/word-spacing.

We could most definitely pass down that information all the way through nsFontMetrics::GetWidth, which uses a StubPropertyProvider here where we could enable spacing.

Jonathan, is that the best path forward? I see the Canvas2d provider already has some support for letter / word-spacing. Do you have a better idea to avoid duplicating that code?

Severity: -- → S3
Status: UNCONFIRMED → NEW
Component: Layout → Layout: Form Controls
Ever confirmed: true
Flags: needinfo?(emilio) → needinfo?(jfkthame)
Priority: -- → P3
Regressed by: 1744009
No longer regressed by: 1762873

Emilio, sorry, my wrong regressor alarm.

Set release status flags based on info from the regressing bug 1744009

(In reply to Alice0775 White from comment #6)

Emilio, sorry, my wrong regressor alarm.

No worries at all! Same author anyways :P

It seemed like that on Windows because on the original test-case the extra width is ~the space that letter-spacing should add :)

(In reply to Emilio Cobos Álvarez (:emilio) from comment #5)

The real regressor here is bug 1744009.

The main issue is that this code doesn't account for letter/word-spacing.

We could most definitely pass down that information all the way through nsFontMetrics::GetWidth, which uses a StubPropertyProvider here where we could enable spacing.

Jonathan, is that the best path forward? I see the Canvas2d provider already has some support for letter / word-spacing. Do you have a better idea to avoid duplicating that code?

I guess that'd probably be the most straightforward, though it's a bit sad to duplicate more and more of the functionality between HTML reflow (nsTextFrame), canvas2d text, and now the nsFontMetrics utilities. (If we add spacing support to GetWidth, we should add it to DrawString as well for consistency.)

In theory, it seems like a cleaner method would be to create an nsTextFrame for the option, with the appropriate style, and query its intrinsic width, but that might be a significantly more heavyweight approach; if there are lots of options, that'd mean an awful lot of temporary frame-munging just to measure the longest one.

Flags: needinfo?(jfkthame)
Summary: Select element text is cut off if letter spacing is used → Select element text is cut off if letter-spacing / word-spacing are used

Is there any workaround? I'm also affected by this bug.

You need to log in before you can comment on or make changes to this bug.