React: Bug: Updating `background` style ignores `backgroundSize`

[bengotow]

What is the current behavior?

I have a React Component rendering a <div> with background and backgroundSize styles. When the user (via the interface) changes the background URL, the background size style is no longer applied.

Here's a fiddle that demonstrates the issue:
https://jsfiddle.net/69z2wepo/75118/

Note how clicking the image container causes the grid to become twice as large (40px size being ignored) and also causes the large background to start tiling. (cover ignored). If you look at the generated DOM, you can see that the background value is no longer a composite of the background+background-size declarations as it is in the first render, but just reflects the background value.

What is the expected behavior?

I would expect React / ReactDOM to combine these two style rules in a consistent way following the two render calls.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

Unknown—currently happening in React 15.4.1 and in the fiddle. I've tested in both Safari and Chrome, and have verified this isn't a browser issue.

[aweary]

Thanks for the report @bengotow, this is essentially the same issue described in https://github.com/facebook/react/issues/6348

You can get around it by using backgroundImage instead of background https://jsfiddle.net/sacdqw1u/. Hope that helps for now!