Image: backgroundColor with borderRadius creates visual artifact

[brunolemos]

The problem

Web	Mobile

Notice the white edge at the web version and not on the mobile. It's a very subtle thing but we should aim for pixel perfect.

How to reproduce Simplified test case: https://codesandbox.io/s/817nx1kzq8 Snack: https://snack.expo.io/@brunolemos/rnw-bug-image-background-color

import React from 'react'
import { Image, View } from 'react-native'

export default function App() {
  return (
    <View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#000000',
      }}
    >
      {/* with backgroundColor and borderRadius */}
      <Image
        source={{ uri: 'https://github.com/pedrottimark.png' }}
        style={{
          width: 200,
          height: 200,
          margin: 20,
          borderRadius: 100,
          backgroundColor: '#FFFFFF',
        }}
      />

      {/* without backgroundColor */}
      <Image
        source={{ uri: 'https://github.com/pedrottimark.png' }}
        style={{ width: 200, height: 200, margin: 20, borderRadius: 100 }}
      />
    </View>
  )
}

Note: I need to add a white backgroundColor because some images are transparent and were made with light background in mind.

Environment

• React Native for Web (version): 0.9.9
• React (version): 16.7.0-alpha.2
• Browser: Chrome 71

Additional context

Based on your implementation, you created another div inside my <Image /> and added background-image there.

One possible solution is to move both background-color and border-radius to the same div that has background-image.

[brunolemos]

Made #1229

[brunolemos]

Tried some things, moving the background-image and background-size from the inner div to the main div fixes it in all browsers. But I don't know if this would break something.