UIScale causes mobile TextBox text input to be scaled incorrectly

Bug Reports Mobile Bugs
#1

Reproduction Steps

Steps to reproduce:

  • Play this experience on mobile (iOS or Android): TextBox UIScale Test - Roblox
  • Tap the text field in the middle of the screen
  • Try typing something

Observe that the text is too large when typed in.

This project reproduces the issue:

TextBox UIScale Test.rbxl (40.0 KB)

The setup for this project is very simple:

image
image600×774 69.1 KB


Expected Behavior

TextBox entry should work on mobile as it does on desktop, as closely as possible. The font should be rendered to look the same when text is being entered as when it is not in text entry mode. UIScale should not stop the TextBox from working.

Actual Behavior

If a TextBox has a UIScale applied to it then the native text input field on iOS and Android is incorrectly scaled. For example, with a scale set to 0.3, the text on the native input appears to be around 3.3 times too big.

Additionally, the font is also shown incorrectly in the text entry box:

  • The font is shown in bold even if a non-bold font is selected (with the Zekton/Sci-fi font at least)
  • The font vertical vertical alignment doesn’t work the same way as Roblox’s font alignment if the text box is smaller than the height of the font. This causes the text entered to jump up and down as you enter it. This can be partly resolved by setting the vertical alignment to ‘bottom’ (or making sure the text box is tall enough)

When not entering text:

IMG_1021
IMG_10212532×1170 2.11 MB

When entering text, observe that only part of the text is shown and the text is shown in bold:
IMG_1022
IMG_10222532×1170 1.52 MB


Workaround

This can be worked around with the following (convoluted) steps:

  • Add a UIScale object to the text field
  • Each time the UIScales in the hierarchy above change, or the absolute size of the parent of the text box changes, calculate the overall scale of the text box by multiplying the scales of all the UIScale values in the hierarchy above the text box together
  • Set the UIScale inside the text box to the inverse of the scale calculated above
  • Set the font size of the text box to the original font size multiplied by the scale calculated above
  • Scale the size of the text box by multiplying each value in the UDim2 by the scale calculated above
    This effectively cancels out the UIScale above the text box and then reapplies the UIScale manually.

Issue Area: Mobile App
Issue Type: Display
Impact: Moderate
Frequency: Constantly
Date First Experienced: 2022-10-17 00:10:00 (+01:00)
Date Last Experienced: 2022-10-18 00:10:00 (+01:00)

1 Like
#2

Thanks. I filed a ticket to our internal database.

2 Likes
#3

This is still happening to my game. Has there been any update on this?

1 Like
#4

I am experiencing this same issue when using UIPadding.

1 Like
#5

Adding on to this, I noticed that the font size appears big on mobile if the TextSize is also a big number. Try setting the TextSize to something small, like 14. When doing this and testing on mobile, it seems to work fine for me. I am also using TextScaled, so I’m not sure why that property gets disabled while editing text.

#6

It seems that when you’re editing text, Roblox places a native text box (i.e. a standard iOS one) over the top of the Roblox-rendered one. This allows the standard native editing controls to work (e.g. selection, copy, paste etc) but their code to work out the font size for this native box doesn’t take into account the UIScaling. Doing this is almost inevitably going to lead to an odd experience even if they fixed it as fonts will render differently between Roblox’s system and the OS’s - but that doesn’t really excuse this bug!