CODEWITHSUNDEEP
csssasscompass-sass
Jiew Meng
Jiew Meng

Reputation: 88317

SASS Compass Linear Gradients with px color stops & webkit

@include linear-gradient(color-stops(#e2e2e2, #fff 600px), top);

will generate something like

background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #e2e2e2), color-stop(100%, #ffffff));
                                                     ^ this is not 600px

Also I learnt from this post that in webkit I should be using something like 600 instead of 600px.

Does Compass not do that?

Also I need to add background-repeat: no-repeat else the gradient will repeat in webkit?

Upvotes: 1

Views: 5420

Answers (1)

steve
steve

Reputation: 3356

+1 having the same issue. Frustratingly, this compass example page shows gradients working fine in WebKit. Maybe it's a version issue? I'm about to try downgrading to an earlier version and see if that helps.

EDIT

Looks like the webkit color stops have been fixed in head. Install the latest version (0.11.beta.2 as of this writing) and make sure you restart your server (unlike we did the first time) and you'll find that webkit color stops work properly.

Upvotes: 1

Related Questions