[Text] has superfluous lines on iPhone Plus

[blockspeiser]

Description

Our app in progress is showing undesired grey lines on the top and/or right of every Text component when run on an iPhone Plus. The bug does not reproduce on the simulator, only on device.

When inspecting the Text components, any component that has a non-integer width or height will show a line like this. A non-integer width adds a border to the right, a non-integer height adds a border to the top.

If I explicitly set a height for each Text component to an integer value I can prevent the top borders, but the width of the Text depends on the length of it content which I cannot control. In the attached image the texts that say "Commentary | 24" and "Tanakh | 2" have the same structure/styling -- but the difference in text length causes one to have a border right and the other not.

This seems related to this issue: #2018

Any suggestions for workarounds are greatly appreciated as well. This issue is ugly and pervasive.

Reproduction

The bug is present in this app: https://github.com/Sefaria/Sefaria-iOS

Additional Information

• React Native version: 0.35.0
• Platform: iOS on devices with PixelDensity 3, does not reproduce on simulator.

[lacker]

Do you have a simple repro app like a rnplay.org link that reproduces this? That's not using a simulator.

[blockspeiser]

After better grokking the details discussed in the issue #2018, we saw also that the line disappear from when the Launch screen is reenabled. So we have a work around to the bug, but seems to confirm the issue still exists when the Launch screen is disabled.

[asivura]

I have the same issue on iPhone 7plus when app does not support 3x resolution.
React native 0.41.0.

Workaround: add {backgroundColor: 'transparent'} to Text style.

[virsaviya]

I'm on 0.35 and @asivura's solution works. Thanks! Have you found a more scalable workaround, by any chance?

[asivura]

@virsaviya I have not. I hope it will be fixed in next versions or we'll stop to use compatibility mode for iOS app in the feature. But it might be an effect from another more complicated issue. I don't know.

[hramos]

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

• Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
• If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
• Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

[mrdezzods]

We tested on iPhone 6 and iPhone 7 plus. We get the exact same issue in iPhone 7 plus.

[calvinlang]

I am having the exact same issue. Never happens on simulator only on real iOS Plus devices.

[kidequinox]

+1

[allthetime]

Why is this closed? Has it been fixed on latest version? It's present on v0.51 at least and I'm curious what the fix is.

[dakiquang]

Thanks @asivura. It works for me. I got the same problem in iPhone 6Plus and 7Plus