React Native WebView rendering unexpected border at bottom

Question

This is a little tricky to describe. I'm using a react native WebView component to make a mini-browser. It's working ok, but there's a strange black border at the bottom of it which I didn't put in. It appears when scrolling to or beyond the bottom of the webpage.

You can see the thin black line above the "blah" text below. The reason for the blah text and the pink section at the bottom was to rule out a stray borderBottom* style on the WebView or its container.

Another thing to note is that the border briefly disappears when reloading the page, so it seems it's in the WebView's html. But I don't understand how or why, because a) it appears on all websites and b) it doesn't appear in other iOS browsers.

Am I doing something strange here?

Screenshot:

Elements and Styles:

<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"
  }
}

score 42 · Accepted Answer · answered Feb 15 '17 at 08:48

42

Set the backgroundColor of the WebView to transparent and the "border" won't be rendered.

<Webview style={{backgroundColor: 'transparent'}} .../>

answered Feb 15 '17 at 08:48

Stefan Wallin

1,502
1
14
19

1

been dragging my hair out about this. You sir, have saved a life! Thank you oh so very very much! – ragamufin May 03 '17 at 18:36
We have encountered similar problem with horizontal scrolling of content and border being rendered on the right edge of container. The solution worked for this too, thanks! – Xarvalus Nov 13 '18 at 11:46

React Native WebView rendering unexpected border at bottom

1 Answers1