Skip to content

[iOS]Text is invisible on HTML mode when content height is long enough #744

@pinarol

Description

@pinarol

The html text is invisible on HTML mode when it is long enough. It is observable in the example app with iPhone X. The content is there, it can be selected/copied but it is not visible. I could repro the invisibility issue on iPhone X, but, other devices has also a trouble displaying the long text, for them text is visible but you can't see the whole text. So in general there's a problem in iOS devices when we try to display long text.

Example app:

invisible-html

iPhone X - WPiOS (text becomes invisible):

ios-longtext-html-iphonex

iPhone 8 - WPiOS (can't display till the end of the text):

ios-longtext-html

Root cause analysis:

I found the almost exact same issue in react-native repo: facebook/react-native#9077 The issue looks like it is related with iOS level.

This thread explains it very well: https://stackoverflow.com/questions/23582497/uitextview-text-becomes-invisible-after-height-reaches-8192-0

Looks like there's a kind of limitation that happens on iOS level and to overcome it we shouldn't put the TextView inside ScrollView and modify its height due to the content size. Instead, we should use a TextView smaller than the screen height and let the inner system handle scrolling on its own and make optimizations on it.

So having said that, this is what we are doing on visual mode also. I tried it with a long enough text on paragraph block and the issue is fully reproducible there too:

(It is less likely to have such long text on visual side, and plus people will tend to split such a text in separate paragraphs so I'd not worry about it for now. But still, this is can be a warning about how we are getting away from iOS's recommended way of rendering long content)

ios-longtext-visualmode-iphonex-

Solution Proposal:

It looks like we need to sacrifice using the ScrollView on HTML mode, thus title and the html content won't be able to scroll altogether anymore, but we won't have anomalies. HTML TextInput will need to scroll inside of its own bounds. I gave this solution a quick try and it is working.

Any other ideas are truly welcomed!

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions