Skip to content

v-bind:style not binding certain properties #5074

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
edjroot opened this issue Mar 2, 2017 · 6 comments
Closed

v-bind:style not binding certain properties #5074

edjroot opened this issue Mar 2, 2017 · 6 comments

Comments

@edjroot
Copy link

edjroot commented Mar 2, 2017

Versions

Vue 2.2.1
Chrome 56.0.2924.87 (64-bit)
Windows 10

Reproduction Link

https://jsfiddle.net/zey5eL5v/

Steps to reproduce

Testing on Chrome, bind { cursor: 'grab' } to an element's style attribute.

What is Expected?

At least on Chrome, style should be assigned cursor: -webkit-grab (noting that it should also be autoprefixed).

What is actually happening?

On Firefox, style is assigned cursor: grab (works as expected). On Chrome, the element doesn't receive a style attribute.

I'm guessing Vue is simply ignoring the property because it's not recognized by Chrome.

@fnlctrl
Copy link
Member

fnlctrl commented Mar 2, 2017

Hi, thanks for filling this issue.
First of all, Vue isn't responsible for auto prefixing styles, it's the job of css processors.
Edit: Vue does automatically add prefixes to property names, but not property values.
And it's actually Chrome that's ignoring the cursor: grab, you can verify this simply by trying

document.body.style.cursor = 'grab'

Browsers simply ignore css properties they can't recognize when setting style with javascript.

As for applying prefixed style objects (e.g. cursor: ['-webkit-grab','grab'], created by tools like postcss), it's currently not supported but there is an open PR for that. (#4994)

@fnlctrl fnlctrl closed this as completed Mar 2, 2017
@edjroot
Copy link
Author

edjroot commented Mar 2, 2017

Thanks for the quick response (and for the PR)!

Vue isn't responsible for auto prefixing styles

Then I guess I'm misreading the docs (or it needs to be updated)?

When you use a CSS property that requires vendor prefixes in v-bind:style, for example transform, Vue will automatically detect and add appropriate prefixes to the applied styles.

@fnlctrl
Copy link
Member

fnlctrl commented Mar 2, 2017

Then I guess I'm misreading the docs (or it needs to be updated)?

Oops, sorry I was wrong about that. Vue does automatically add prefixes to property names, but not property values. Perhaps this should be noted in the docs..

@edjroot
Copy link
Author

edjroot commented Mar 2, 2017

No problem! That makes sense, thanks!

For now, how can I achieve this? I thought about returning something like postcss([autoprefixer]).process(styleObj).css in all computed properties, but I'm not sure if this is the recommended way.

@fnlctrl
Copy link
Member

fnlctrl commented Mar 2, 2017

For now, the only way is using <style> tags + prefixed css, instead of binding inline style with v-bind:style, since binding objects like cursor: ['-webkit-grab','grab'] requires v-bind:style to support array as value.

@fnlctrl
Copy link
Member

fnlctrl commented Apr 17, 2017

Closing as the PR has been merged. #5460

@fnlctrl fnlctrl closed this as completed Apr 17, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants