backgroundClip property not applying on Webkit browsers

[buzzb0x]

The problem

Trying to apply the property background-clip with the value text fails on WebKit based browsers. Also, it is unclear how to enforce vendor prefixes when they are wanted. For example, here, on Firefox, using WebkitBackgroundClip is unsuccessful, but -webkit-backgroundClip and -webkit-background-clip work.

How to reproduce

Simplified test case: https://codesandbox.io/s/p99rr7nwvm

Failure screenshot: https://screenshots.firefox.com/vCQq2udOPaIZgnlK/codesandbox.io

Success screenshot: https://screenshots.firefox.com/hoAGK4Q8c03EUgl1/codesandbox.io

Steps to reproduce:

1. Create a Text element
2. Apply styling that uses the backgroundClip property
3. Watch it fail on Chrome, Safari, but not on Firefox

Expected behavior

I frankly expected it to prefix it and apply it correctly on all browsers, as that is what the documentation suggests.

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

• React Native for Web (version): 0.8.6
• React (version): 16.4.1
• Browser: Firefox 60, Chrome 67,

I'm using React Native Web to create a website, I develop in React Native so it's easier for me. Wouldn't it also be useful to be able to directly specify custom CSS styling to a component?

[necolas]

If there's a problem with prefixing the property it will lie upstream here: https://github.com/rofrischmann/inline-style-prefixer. You should also know that background is not a supported property.

[necolas]

Your example has a few issues. Once fixed it works correctly:

1. Use backgroundImage instead of background (see the docs for supported View styles).
2. Use color instead of WebkitFillColor.
3. Use the W3C linear-gradient syntax.
4. Upgrade the RNW dependency to 0.8.x.