Fix input line-height cutting off g

[hiifong]

Fix the incomplete display of input text
Before:


After:

[silverwind]

I think there ought to be better solutions, but I can not reproduce the issue. Which browser/os do you see this on?

Here is Firefox Mac:

[hiifong]

I think there ought to be better solutions, but I can not reproduce the issue. Which browser/os do you see this on?

Here is Firefox Mac:

Google Chrome Windows11

[hiifong]

I think there ought to be better solutions, but I can not reproduce the issue. Which browser/os do you see this on?

Here is Firefox Mac:

Microsoft Edge

[silverwind]

Chrome on Mac seems fine as well:

[hiifong]

Chrome on Mac seems fine as well:

Chrome on ubuntu is also

[silverwind]

Can you check if there is any overflow: hidden style maybe where you reproduce it? I thought the default behaviour of inputs is that they don't cut off their value like that. I really wonder whether this is a Blink bug if there is no overflow: hidden style anywhere.

[wxiaoguang]

It can't be right if you put a "!important" on a general element/style. It would pollute uncontrollable styles and cause unfixable overriding bugs.

[hiifong]

What about replacing element selectors with class selectors?

[silverwind]

Before looking for such workarounds, check why the problem is happening in first place. Does a unstyled <input> element reproduce the problem? If not, add the same CSS properties we do until it does show the issue, then you have the culprit.

[hiifong]

I will test it

[silverwind]

Likely the problematic style is

.ui.input > input {
  line-height: 1.21428571em;
}

Can you reproduce the problem on https://fomantic-ui.com/collections/form.html#form? If you, we can override this style to maybe 1.25em, just enough to fix your issue basically.

If you wanna be completely thorough, also report a bug upstream to https://github.com/fomantic/Fomantic-UI, but keep in mind we're not going to update fomantic-ui anymore as we are trying to migrate off of it currently.

[silverwind]

Scroll down there, it should be somewhere.

[hiifong]

[hiifong]

is here?

[silverwind]

It should be somewhere, otherwise the CSS your browser has received is incomplete. Can you check the Computed tab for the line-height value?

In any case, I'll probably see what I can do and push a fix here.

[hiifong]

[hiifong]

When I select the text, the text is displayed fine.

Windows11 Chrome:

1.mp4

Ubuntu20.04 Chrome:

2.mp4

[silverwind]

So I reproduced this on Windows Chrome. It is related to our choice of fonts apparently. I've pushed a fix that overrides the problematic Fomantic CSS without !important for the least possible impact.