search

necolas / react-native-web

Cross-platform React UI packages
https://necolas.github.io/react-native-web
MIT License
21.67k stars 1.79k forks source link

Image: SVG source breaks resizeMode repeat in Safari #1119

Open dcalhoun opened 6 years ago

dcalhoun commented 6 years ago

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?

Notes:

necolas commented 6 years ago

Have you looked into why yet?

dcalhoun commented 6 years ago

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.

https://github.com/necolas/react-native-web/blob/1f3a77dadad26c09dc3d854f07ffaf4f23f2417c/packages/react-native-web/src/exports/Image/index.js#L323

rnw-background-sizing

necolas commented 6 years ago

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 commented 6 years ago

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

necolas commented 6 years ago

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… :'(