App: [$250] Mac / Firefox - Composer height increases on adding emoji reported by @daraksha-dk

The scrollHeight for emojis in Firefox is greater than lineHeight

Nice find. Would each browser use a different default though?

@trjExpensify a quick look, you can reproduce in the edit input too , the scrollHeight for emojis in Firefox is greater than lineHeight this will make number of rows = 2 for first input

The solution is to increase lineHeight to match the scrollHeight , but make sure to run tests against any changes when editing the compose styles as it is easy to introduce regressions

https://github.com/Expensify/App/blob/12dd4c6ea78e2454938ca9bf720d4e1b64d31ef0/src/styles/styles.js#L1396

-        lineHeight: 20,
+        lineHeight: 21,

Test Firefox

Before

After

I can reliably reproduce this on Web - FireFox (staging v1.2.28-0, using a Mac):

Confirmed the issue is not present on Web - Chrome & Web - Safari nor the desktop app. Confident this is an external issue, so adding the label.

Tagging a few people that were involved in this recent issue for any potential clues. CC: @Santhosh-Sellavel @fedirjh @Julesssss

Thanks for the investigation really appreciate @fedirjh!

I try a solution by adding font-size-adjust: 0.5; to our composer input, and this fix the line height issue but the emoji is kinda small to me. With font-size-adjust

Without font-size-adjust

Here’s my opinion:

• The issue is specified as Firefox scaled up the font size of our input.
• I agree font-size-adjust: 0.5; is the best option because is not change the size of the text and only applied to Firefox. But the downside is the emoji look smaller than the text.
• I also consider this proposal which raises the line height, but maybe raising it to 22 so it resolves the mWeb and applies it only to Firefox?

cc @trjExpensify @tgolen

After investigation , i found two other solutions to fix 1st issue

• font-size-adjust: 0.5; applied to textInputCompose : this css property works only on firefox browser_compatibility so i think it’s the best option here
• size-adjust: 90%; applied to the font-face : i don’t recommend this solution as this change will affect the whole app and maybe it will create regression , check this source and size-adjust for more info

The size-adjust CSS descriptor defines a multiplier for glyph outlines and metrics associated with this font. This makes it easier to harmonize the designs of various fonts when rendered at the same font size.

All proposed solutions will only fix the first issue , i think that 2nd issue is a different one , I found that Firefox Android has an option to apply android font size instead of our font , this option when enabled will scale font by x 1.1 , so instead of 15px there is 16.5px applied , this font scaling will affect the scrollHeight

This is the log when the option is enabled

This is the log when the option is disabled :

This is the option

I’m playing around with text input styles by adding padding-top: 1px; padding-bottom: 1px;. After that, the scrollHeight is calculated correctly.

@mollfpr modifying padding will create regression on android #10202

It’s from Firefox. I just crop it 😅

I just test the INPUT scroll height on each Mac Chrome, Safari, and Firefox. On Chrome and Safari, the INPUT scroll height remains the same after adding a text or emoji. But on Firefox as @fedirjh is adding an extra 1px after adding an emoji to the INPUT.

@trjExpensify the root cause is the same for both issues which is scrollHeight > lineHeight , tested on mWeb , there is extra 2px for both emojis and text

This means that changing the lineHeight style value will not resolve the issue in all devices.

I think this is related to font-smoothing , each browser uses different values , while Firefox mobile doesn’t support this feature , FireFox Web implements this property but only works on macOS . check https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth

So if we remove the font-smoothing it will resolve the issue?

One thing that I found in my Firefox if I set the browser to not allow the pages to choose the fonts, the input is working fine.

https://user-images.githubusercontent.com/25520267/202350901-ecbe37f5-fd78-4e0a-9e35-b99918b51a5f.mov

@fedirjh are you interested in taking point on this issue?

Also, sounds like we have another firefox issue being reported here, this time on mWeb. I’ve tagged you all for thoughts. If the root cause is the same, let’s combine and increase the bounty for tackling both 😃