Skip to content

Wrong style interpolation #2654

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
paulpflug opened this issue Apr 11, 2016 · 6 comments
Closed

Wrong style interpolation #2654

paulpflug opened this issue Apr 11, 2016 · 6 comments

Comments

@paulpflug
Copy link

Vue.js version

1.0.21

Steps to reproduce

<div :style="{backgroundSize:'100%'}"></div>

What is Expected?

<div style="background-size:100%;"></div>
// or
<div style="background-size:100% auto;"></div>

What is actually happening?

<div style="background-size:100% 100%;"></div>

from css documentation of background-size:
Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto"

@simplesmiler
Copy link
Member

This is a webkit misfortunate feature:

WebKit-based browsers originally implemented an older draft of CSS3 background-size in which an omitted second value is treated as duplicating the first value; this draft does not include the contain or cover keywords.

Demo: https://jsfiddle.net/re2y30hh/
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Browser_compatibility

@simplesmiler
Copy link
Member

Vue was set to test prefixed version before the non-prefixed by 8dd598c to fix #2219.
I think it should test non-prefixed version first, with the exception for buggy properties (like filter).

@yyx990803
Copy link
Member

Does using non-prefixed name fix this duplicate value issue?

@simplesmiler
Copy link
Member

Yep, setProperty('background-size', '100%') works and setProperty('-webkit-background-size', '100%') does not.

@yyx990803
Copy link
Member

@simplesmiler ah ok. So we get bitten by browser vendors either way. Oh well... yeah let's check for non-prefixed version first, and treat filter as a sepecial case.

@simplesmiler
Copy link
Member

Fixed with #2668

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants