Textfield selection misalignment, web version on iPhone

[InnerSky]

Can we access your project?

• [X] I give permission for members of the FlutterFlow team to access and test my project for the sole purpose of investigating this issue.

Current Behavior

On my iphone viewing the web version of app, In a textfield if I type some text on the first line and then select it. I can see a gray selection that goes off below the correct selection. From my observation, this is because my iPhone (or the virtual keyboard) THINKS that my text is actually vertically centered in the text field, and since I only have one line of text, that's going to be where it is. This is evident if you type two lines of text and highlight them all, you will also see that the "ghost highlight" is centered vertically

Expected Behavior

The highlight should be exactly the same with the blue highlight. (may I ask why there's blue highlight AND gray highlight? This seems only to happen in web version on iOS. Android doesn't cause this double selection highlight)

Steps to Reproduce

You can use this link to see my reproduced Bug Page

1. Brand new project
2. Enable web publishing (not using CanvasKit or Original Engine)
3. Put a few textfield in the homepage column, set the Min Line to more than 1
4. Publish it to web
5. View the web on an iPhone (Which I use and experienced the issue)
6. Type one line of text in the textfield then select it
7. Observe the gray highlight is not on the text, but vertically centered detached from the text

Reproducible from Blank

• [X] The steps to reproduce above start from a blank project.

Bug Report Code (Required)

IT5fhfHl8ZN1xd9A1s+Mbfpsmj45KUAjap03lNVhdxIjG5PqEOwtdczOYlJJYs+HdGNmeVGjpGcy08rZhuztF8YFH0mAc4dq3bpbWgziZDqQaKq0ErjoPEB8TdJUGXKey5+Nvgx9FPt0WHNn1HGUC+6/QhLUCYztC0Q3MPikOq7AkXCVLg33NyEy5CdecCfn

Visual documentation

Environment

- FlutterFlow version: 5.0.5
- Platform: Web
- Browser name and version: Safari
- Operating system and version affected: iOS 17.6.1

Additional Information

I am building a journaling app, and have a custom Editor I built using Fleather and it has very similar issue of text selection offset on web using iOS. This is a core function to my need.

[paulperez-dev]

Hi @InnerSky,

I was able to reproduce the issue, and I will be forwarding it to the Engineering team so they can investigate and work on a fix.

Thank you for bringing this to our attention!