{"action":"created","issue":{"url":"https://api.github.com/repos/facebook/react/issues/5030","labels_url":"https://api.github.com/repos/facebook/react/issues/5030/labels{/name}","comments_url":"https://api.github.com/repos/facebook/react/issues/5030/comments","events_url":"https://api.github.com/repos/facebook/react/issues/5030/events","html_url":"https://github.com/facebook/react/issues/5030","id":109359892,"number":5030,"title":"CSS `backgroundSize` property lost when re-rendering an image URL inside of an adjacent `background` property","user":{"login":"GWShark0","id":2968519,"avatar_url":"https://avatars.githubusercontent.com/u/2968519?v=3","gravatar_id":"","url":"https://api.github.com/users/GWShark0","html_url":"https://github.com/GWShark0","followers_url":"https://api.github.com/users/GWShark0/followers","following_url":"https://api.github.com/users/GWShark0/following{/other_user}","gists_url":"https://api.github.com/users/GWShark0/gists{/gist_id}","starred_url":"https://api.github.com/users/GWShark0/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/GWShark0/subscriptions","organizations_url":"https://api.github.com/users/GWShark0/orgs","repos_url":"https://api.github.com/users/GWShark0/repos","events_url":"https://api.github.com/users/GWShark0/events{/privacy}","received_events_url":"https://api.github.com/users/GWShark0/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":3,"created_at":"2015-10-01T18:48:11Z","updated_at":"2015-11-04T17:39:39Z","closed_at":"2015-10-01T19:16:00Z","body":"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.\r\n\r\nFor example, if we define a style like so:\r\n```javascript\r\nvar style = {\r\n    background: `#ffffff url(${this.state.url})`,\r\n    backgroundPosition: `${this.state.x}% ${this.state.y}%`,\r\n    backgroundSize: 'cover'\r\n};\r\n```\r\n\r\nThe initial render returns a style in the form:\r\n`style=\"background:#ffffff url([URL]);background-position:[X]% [Y]%;background-size:cover;\"`\r\n\r\nIf we change the state (such as `this.state.x`) to cause a re-render, the style format is changed to:\r\n`style=\"background: url([URL]) [X']% [Y]% / cover rgb(255, 255, 255);\"`\r\n\r\n--\r\n\r\nWhere this seems to break down is while changing the state of a URL inside of the `background` property while also defining a `backgroundSize`.\r\n```javascript\r\nvar style = {\r\n    background: `#ffffff url(${url})`,\r\n    backgroundSize: 'cover'\r\n};\r\n```\r\nThe initial render will return the expected style:\r\n`style=\"background:#ffffff url(http://i.imgur.com/aPd8qDo.png);background-size:cover;\"`\r\n\r\nHowever, changing the URL results in rendering a style without `background-size`:\r\n`style=\"background: url([URL]) rgb(255, 255, 255);\"`\r\n\r\n---\r\n\r\n[Example Demo](http://codepen.io/xgad/pen/VvPJBK?editors=001)\r\n"},"comment":{"url":"https://api.github.com/repos/facebook/react/issues/comments/153803552","html_url":"https://github.com/facebook/react/issues/5030#issuecomment-153803552","issue_url":"https://api.github.com/repos/facebook/react/issues/5030","id":153803552,"user":{"login":"jimfb","id":9595985,"avatar_url":"https://avatars.githubusercontent.com/u/9595985?v=3","gravatar_id":"","url":"https://api.github.com/users/jimfb","html_url":"https://github.com/jimfb","followers_url":"https://api.github.com/users/jimfb/followers","following_url":"https://api.github.com/users/jimfb/following{/other_user}","gists_url":"https://api.github.com/users/jimfb/gists{/gist_id}","starred_url":"https://api.github.com/users/jimfb/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jimfb/subscriptions","organizations_url":"https://api.github.com/users/jimfb/orgs","repos_url":"https://api.github.com/users/jimfb/repos","events_url":"https://api.github.com/users/jimfb/events{/privacy}","received_events_url":"https://api.github.com/users/jimfb/received_events","type":"User","site_admin":false},"created_at":"2015-11-04T17:39:39Z","updated_at":"2015-11-04T17:39:39Z","body":"@zpao @spicyj @syranide  Could we solve all these correctness issues/concerns if we were to use `cssText` instead of setting the properties individually?\r\n\r\nMy understanding is that we've always claimed that diffing the css ourselves was faster than letting the browser do it, but Ben's perf test (http://jsperf.com/style-vs-csstext-vs-setattribute/8) from https://github.com/facebook/react/issues/929 seems to indicate that `cssText` isn't actually any slower (in fact, maybe faster than diffing ourselves) and I **think** it would solve all these concerns in one fix.  Thoughts?"}}