Webviews not visible on screen suddenly never load their HTML content

Bug description: This was previously working, but suddenly doesn’t for me. When a component containing a Webview is mounted, but not visible on the screen, it won’t load HTML content, seems like 95% of the time in production. Oddly, in development, it usually works properly, which makes debugging this phantom issue nearly impossible.

To Reproduce:

<View
  style={{
    display: 'none',
    flex: -1,
    height: 0,
    width: 0,
    zIndex: -100,
  }}>
  <WebView
    style={{ flex: 1 }}
    useWebkit
    ref={this.myWebview}
    originWhitelist={['*']}
    source={{
      html: this.myHtml,
      baseUrl: '',
    }}
  />
</View>

Removing display: 'none' has no effect, and setting a height and width of 1px does not resolve the issue.

Expected behavior: The Webview should load the source when the component containing the Webview is mounted. When I ensure the Webview is visible it loads the content, but again, only 95% of the time.

Screenshots/Videos: None, Webview is intentionally not visible.

Environment:

• OS: Android
• OS version: 9
• react-native version: 59.8 (Expo SDK34)
• react-native-webview version: 5.12.0

Additional Details: This issue is really difficult to debug, because it only fails to load the HTML about 95% of the time when hidden. When the Webview is visible, it only succeeds in loading the HTML ~95%. I can’t find any consistent place to begin debugging because I can’t reproduce the issue with 100% success.

The only changes to my project since this suddenly became an issue were upgrading Expo from 33 to 34, and upgrading react-native-webview from 5.8.1 to 5.12.0. I tried downgrading to 5.8.1, but the issue is there too.

If this is an intentional changes or there’s some throttling applied to Webviews that aren’t visible to the user, I don’t see it mentioned anywhere for either project

[jinhale]

As far as I can tell setting the parent container to flex: 1 is what fixes it.

Here is a broken example:

    <View>
      <WebView
        originWhitelist={['*']}
        source={{ html: '<h1>This is a static HTML source!</h1>' }}
      />
    </View>

Here is a working example:

    <View
      style={{
        flex: 1,
      }}
    >
      <WebView
        originWhitelist={['*']}
        source={{ html: '<h1>This is a static HTML source!</h1>' }}
      />
    </View>

I confirmed this today. I think this could be “fixed” with documentation. Here is some context to help in verifying the issue:

PS C:\Users\jhale\AwesomeProject> react-native --version
react-native-cli: 2.0.1
react-native: 0.60.5

[Slapbox]

The thing is that I had a flex: 1 on the container, but if the container wasn’t visible that didn’t matter. The only that worked for me seemed to be the exact code I posted. ¯\_(ツ)_/¯