Image: SVG source breaks resizeMode repeat in Safari

[dcalhoun]

The problem
Rendering <Image resizeMode="repeat" /> with an SVG source does not repeat in macOS Safari and iOS Safari.

How to reproduce
Simplified test case: https://codesandbox.io/s/m7n8zm1kwj

Steps to reproduce:

1. Render <Image resizeMode="repeat" /> with an SVG source

Expected behavior
In all browsers, the image repeats to fill the width and height of the container.

Environment (include versions). Did this work in previous versions?

• React Native for Web (version): 0.9.0
• React (version): 16.5.2
• Browser: macOS Safari 12, iOS Safari 12

Notes:

• The server rendering of the component renders accurately, the mounted client breaks the repeating image.

[necolas]

Have you looked into why yet?

[dcalhoun]

Yes, it seems related to the calculation within Image._getBackgroundSize. I do not know why it is different at the present, but the "natural" dimensions are different in Safari.

react-native-web/packages/react-native-web/src/exports/Image/index.js

Line 323 in 1f3a77d

const { naturalHeight, naturalWidth } = this._imageRef;

[necolas]

I suspect this is a bug in WebKit

https://bugreports.qt.io/browse/QTBUG-47094

Which the Chrome team fixed in Blink

https://bugs.chromium.org/p/chromium/issues/detail?id=396955

Not sure there's anything I can do about it on from user-land

[dcalhoun]

Bummer. Thank you for looking into it. I guess I'll just have to utilize a raster image for the time being.

[necolas]

I haven't tried altering the code, but you could try removing the height/width from the accessibility image to see if it changes the results you get in Safari: https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/Image/index.js#L415. If it does, there might be something we can do. If not… :'(