CSS `backgroundSize` property lost when re-rendering an image URL inside of an adjacent `background` property

The CSS background property can shorthanded in many various ways. When inlining multiple styles including that property, React seems to optimize them on re-render.

For example, if we define a style like so:

var style = {
    background: `#ffffff url(${this.state.url})`,
    backgroundPosition: `${this.state.x}% ${this.state.y}%`,
    backgroundSize: 'cover'
};

The initial render returns a style in the form: style="background:#ffffff url([URL]);background-position:[X]% [Y]%;background-size:cover;"

If we change the state (such as this.state.x) to cause a re-render, the style format is changed to: style="background: url([URL]) [X']% [Y]% / cover rgb(255, 255, 255);"

Where this seems to break down is while changing the state of a URL inside of the background property while also defining a backgroundSize.

var style = {
    background: `#ffffff url(${url})`,
    backgroundSize: 'cover'
};

The initial render will return the expected style: style="background:#ffffff url(http://i.imgur.com/aPd8qDo.png);background-size:cover;"

However, changing the URL results in rendering a style without background-size: style="background: url([URL]) rgb(255, 255, 255);"

---

Example Demo

[zpao]

This is a known issue with CSS shorthand expansion. For now the recommendation is to list each explicit property and not rely on the shorthand. Usually these bugs only surface on update because initial render simply creates an inline style as a part of setting innerHTML. Updates work on individual properties so when you set background on the update we notice that you only changed background so only set that property, which since it’s a shorthand, clears out the backgroundSize property.

See #4661 for more discussion.

[huoyingjianshen]

use code follow:

getStyle = () => {
    var style = {
                background: "url(xxxxxxxxxx") no-repeat center",
                backgroundSize: "100% 100%"
            }
    return style;
}
<div style={getStyle}></div>