ios - 下部に予期しない境界線をレンダリングするReact Native WebView

Question

これは少し説明が難しいです。WebViewミニブラウザを作成するために反応ネイティブコンポーネントを使用しています。正常に動作していますが、その下部に奇妙な黒い境界線があります。これは私が入れたものではありません。ウェブページの下部までスクロールすると、またはそれを超えてスクロールすると表示されます。

下の「何とか」テキストの上に細い黒い線が表示されます。何とかテキストと下部のピンク色のセクションの理由はborderBottom*、WebView またはそのコンテナーのスタイルが曖昧であることを排除するためです。

注意すべきもう 1 つのことは、ページをリロードすると境界線が一時的に消えることです。そのため、WebView の html にあるようです。しかし、a) すべての Web サイトに表示され、b) 他の iOS ブラウザには表示されないため、その方法や理由がわかりません。

私はここで奇妙なことをしていますか？

スクリーンショット:

要素とスタイル:

<View style={styles.container as any}>
    <View style={styles.header as any}>
      {this.addressbarButtonProps().map(props => React.createElement(Button, { ...props, key: props.title }))}
      <TextInput
        ref={ADDRESSBAR_REF}
        placeholder="type url"
        style={{ minWidth: this.screenWidth - 50 * this.addressbarButtonProps().filter(b => !b.hidden).length - 10 }}
        />
    </View>
    <WebView
      ref={WEBVIEW_REF}
      source={{uri: this.state.uri}}
      style={{ ...styles.web, width: this.screenWidth, paddingBottom: 0, padding: 0 }}
      scalesPageToFit={true}
      allowsInlineMediaPlayback={true}
      onMessage={m => this.onMessage(m.nativeEvent.data)}
      injectedJavaScript={js}
      startInLoadingState={true}
    />
    <Text style={{ borderTopWidth:20, borderTopColor: "red" }}>blah</Text>
  </View>

const styles = {
  container: {
    paddingTop: 20,
    flex: 1,
    alignItems: "center",
    justifyContent: "space-between",
    backgroundColor: "#fafafa",
    borderBottomColor: "pink",
    borderBottomWidth: 100
  },
  header: {
    flexDirection: "row",
    alignItems: "flex-start",
    justifyContent: "flex-start",
    alignSelf: "stretch"
  },
  web: {
    flex: 1,
    borderBottomColor: "#fafafa",
    backgroundColor: "#fafafa"
  }
}