cannot set ''background' css property if it includes 'cover'
Reported by
davidmax...@gmail.com,
Feb 13 2018
|
|
Issue descriptionUserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Steps to reproduce the problem: 1. open https://www.google.com/ 2. open the dev tools - ctrl-shift-i 3. select the 'elements' tab and the 'body' element (any will do) 4. focus the console 5. type '$0.style.background = 'url(max.jpg) cover' What is the expected behavior? I expect the background style to be set to 'url(max.jpg) cover' What went wrong? nothing is set Did this work before? N/A Does this work in other browsers? N/A Chrome version: 64.0.3282.140 Channel: stable OS Version: ubuntu 17.10 Flash Version: Researching this, it seems it is a problem for many and only for chrome. It seems the 'backgroundSize' property has to be set separately and after the 'backgroundImage' property. That is easily remedied with separate properties, but when they are specified in the same shorthand 'background' property, it is intuitive that it is order left-to-right, and the URL is first so the order is correct....that's not to say that the order makes much sense to a user (at least on first encountering the problem), but that's another issue. Please allow all background styles to be set using the single short hand 'background' property.
,
Feb 13 2018
Thanks for that. I don't quite understand the syntax used in the spec, so I don't dispute what you or the spec says, but I presume that it only applies to the short hand and not when they're specified individually? I think that is the cause for the confusion, at least in my case (since I want to bind all the 'background' css properties to some js property, which is easier to do in the one shorthand css property than individually).
,
Feb 13 2018
Yes, the reference above is to the shorthand (background), which is different from the individual longhands. For backgroundSize [1] you'd just say 'cover'. [1] https://drafts.csswg.org/css-backgrounds/#the-background-size
,
Feb 13 2018
ok. I have to say that I find that behaviour difficult to understand - quite unintuitive - but hey ho. Shame there's no error message or anything, and from what I've read this is chrome specific (I've not tried it myself), hence the presumption it is a bug. In case anyone else comes looking and finds this bug; on the MDN page for background[1], I see the following, which seems to reflect what you're saying but in plainer language: "The <bg-size> value may only be included immediately after <position>, separated with the '/' character, like this: "center/80%"." Anyway, thanks for your time on this. I'll try to add this to the SO issues I have found. [1] https://developer.mozilla.org/en-US/docs/Web/CSS/background
,
Feb 13 2018
I checked your example in Firefox (nightly) and it acts/accepts the same syntax as Chrome/Blink. I would tend to agree that it's bad that this is clearly communicated (by spec or DevTools), but good that MDN has some more clarifying text (thanks for adding that reference.) |
|
►
Sign in to add a comment |
|
Comment 1 by f...@opera.com
, Feb 13 2018