BUG! Left here in hope that it will attract attention and perhaps a fix.
The problem is that chrome, makes(i have checked!) the first half of the gradient smaller than the second one. My code is:
background: linear-gradient(to left, #ffffff 50%, #f5f5f5 50%) fixed;
Also tried:
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff3236), color-stop(50%,#ff3236), color-stop(50%,#000000), color-stop(100%,#000000));
background: linear-gradient(to left, #f5f5f5 0%,#f5f5f5 50%,#ffffff 50%,#ffffff 100%);
Edit/Update: It is indeed a bug - updates are for clarity (top 2 blocks are divs, each 50% width, of screen - bottom is split with gradient):
1) Visual representation of the bug:
2) Thanx to #elstgav for a putting up the a Codepen Test
As of now (2016-11-02), This issue ssems to be fixed, I just tested these pens :
http://codepen.io/elstgav/pen/guotz
http://codepen.io/gliesche/pen/GoWMVO
in Chrome Version 54.0.2840.71 m,
and they all work.
However, Chrome still seems to have some issues with scaling gradient backgrounds when they are repeated:
SO link: Chrome not updateing background-size gradient properly on resize
Chrome BT: https://bugs.chromium.org/p/chromium/issues/detail?id=604875
Related
Just noticed that gradient in Chrome is't equal. Using this css
background: linear-gradient(to right, #00a4e4 0%, #00a4e4 50%, #369044 50%, #369044 100%);
In my case the left part is 657px, and the right part is 650px. This happen only in Chrome.
Fiddle
Any fix for this?
I have a linear gradient as background, which works fine in Firefox, Opera classic etc. but jumps in 10px strips in Chromium (and also on Android stock browser). You can see there is no smooth gradient but 2 stripes instead.
My problem is also that I want a sharp cut (blue/white) but because of the 10px strips the cut jumps in 10px steps instead of 1px. I have the blue box here which should be aligned with the gradient but doesn't because of these 10px steps.
background: -webkit-gradient(linear, left top, right top, color-stop(0px,#247), color-stop(800px,#247), color-stop(800px,#fff), color-stop(820px,#fff), color-stop(820px,#247), color-stop(1000px,#247)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #247 0px,#247 800px,#fff 800px,#fff 820px,#247 820px,#247 1000px); /* Chrome10+,Safari5.1+ */
background: linear-gradient(to right, #247 0px, #247 800px, #fff 800px, #fff 820px,#247 820px, #247 1000px); /* W3C */
I'm also using all other prefixed versions (-moz, -o, -ms).
EDIT: Ok, I should have added a demo to begin with, here it is: Codepen DEMO. The left blue block should be exactly 1000px, as wide as the control block below. And it is in Firefox and Opera Classic, but not in Chrome and Chromium.
It is an "optimisation feature" of chrome - see this SO question for more info. As of Chrome 35 you cannot rely on the width of columns created by gradient colour stops.
See this pen for a cool animated demonstration and links to bug (which are all in the other SO question too).
why dont you just use a gradient generator ?
http://gradients.glrzad.com/
http://www.colorzilla.com/gradient-editor/
even from microsoft http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/
I'm struggling to get the size of CSS3 gradients to work properly. I've set a background-size:800px; yet, as seen in the jsfiddle below, it most certainly isn't 800px. Have I misunderstood the property? It seems to work differently in different circumstances; when used without other headers the background resizes with the browser, when included in the H5BP it doesn't resize, but is far too short in height.
I am very very confused! How on earth do I create a repeating background gradient of a specific size?
body {
background: #0d1a2d;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1b355a), color-stop(50%, #000000), color-stop(100%, #1b355a));
background-image: -webkit-linear-gradient(#1b355a, #000000 50%, #1b355a);
background-image: -moz-linear-gradient(#1b355a, #000000 50%, #1b355a);
background-image: -o-linear-gradient(#1b355a, #000000 50%, #1b355a);
background-image: linear-gradient(#1b355a, #000000 50%, #1b355a);
background-size: 800px;
}
jsfiddle: background-size example
You need to specify the size in both the x and y direction, like so:
background-size: 800px 800px;
View on JSFiddle
With that said, what you've done is compliant with the CSS3 specs. According to the MDN, however -- and what we can gather from your experiment -- browser compliance with this spec is inconsistent and unreliable. So, for now, it's best to explicitly define both directions.
Once browsers' behavior complies with the specs, setting a single value will set the other to be auto.
On my way to finding a CSS solution to have an evenly colored element with angled beginning to avoid images I stumbled across this simple example: http://dabblet.com/gist/1780333 . This one is working fine, even in IE of the latest, only Safari is reversing it completely, putting it to the end instead of the beginning AND turning the angle partly, at least in my live site it's not consistent. I have, of course, the same values for all browser versions.
Anybody an idea why it is so and what one can do - or an alternative solution without images to come up with an angled left side of an element?
This isn't a bug - there were quite a few changes between the Working Draft and the Candidate Recommendation for the gradient syntax, one of which is the angle of the gradient:
From the IE Blog. Hence the unprefixed version requires a different deg value to the prefixed versions. The CR is much more logical (to me at least), with 0deg being a gradient line pointing to the top and increasing in a clockwise direction.
I think you found a bug! Or at least Safari is interpreting the angles differently.
This isn't surprising as until pretty recently Safari used the -webkit-gradient syntax which is much less flexible. For example, it doesn't allow angles.
Still you can solve your problem by including the old syntax, which still works:
background: -webkit-gradient(linear, 10% 100%, 0% 0%, color-stop(80%, #000000), color-stop(80%, transparent));
background: -webkit-linear-gradient(60% 100%, #000000 80%, transparent 80%);
background: -moz-linear-gradient(60% 100%, #000000 80%, transparent 80%);
background: -o-linear-gradient(60% 100%, #000000 80%, transparent 80%);
background: linear-gradient(60% 100%, #000000 80%, transparent 80%);
Demo
So, I found this neat code which had some gradient effects with CSS3, but only with the old webkit syntax.
I'm trying to get it to work in the other browsers, but I can't figure out how to convert it to the right syntaxes.
This is the code:
background: -webkit-gradient(linear, left top, right top,
color-stop(0%,rgba(221,221,221,1)),
color-stop(50%,rgba(221,221,221,0.01)),
color-stop(100%,rgba(221,221,221,1))
);
And:
background: -webkit-gradient(linear, left top, right bottom,
color-stop(0%,rgba(0,0,0,.1)),
color-stop(85%,rgba(255,255,255,0.01)),
color-stop(100%,rgba(255,255,255,.35))
);
The first one would be:
background-image: linear-gradient(left top,
rgba(221,221,221,1) 0%,
rgba(221,221,221,0.01) 50%,
rgba(221,221,221,1) 100%
);
I leave the second one as an exercise to you;) For a little help:
The spec
Gradient Tool