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/
Related
I'm trying to use repeating-linear-gradient on a border that has a 1px wide line with 6px of spacing between each line.
Can someone tell me what I'm doing wrong so the lines are not the same width when they repeat? I've tried tweaking the pixel values but they never match up.
JSFiddle
background: gray repeating-linear-gradient(-45deg, transparent, transparent 1px, #fff 1px, #fff 6px);
Based on this CSS Tricks article by Ana it seems like the browsers have rendering differences when it comes to repeating-linear-gradient. There are comparison screenshots at the end of the article which highlights how the rendering is correct in Firefox on Windows but not so in Chrome on Windows and Firefox on OS X.
Solution:
One solution seems to be set background-size and make two strokes part of the gradient (unlike the code in question where there is only one stroke). The background size is calculated as the last color stop point (14px) divided by square root of 2 (which approximately becomes 10px).
The background-size setting is mandatory because without that it doesn't work in Opera, Chrome. It does seem to make the line a bit thicker but it atleast seems to work better than before.
This works in Chrome, Opera, Edge, IE11, Firefox on Windows and Firefox on OS X.
.border {
background: gray repeating-linear-gradient(-45deg, transparent, transparent 1px, #fff 1px, #fff 7px, transparent 7px, transparent 8px, #fff 8px, #fff 14px);
background-size: 10px 10px; /* equal to last color stop point / sqrt(2) - 14 / 1.414 */
height: 50px;
}
<div class="border"></div>
Below is the screenshot from Firefox on OS X (thanks to web-tiki for the screenshot).
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
I applied a gradient as background image to my body. Then I added 255px offset at the top using background-position:0 255px;.
It looks quite good except one little issue: of course the gradient does not end at the bottom of the page but 255px underneath.
Is there any easy way to let the gradient end at the bottom but start with offset from to?
http://jsfiddle.net/julian_weinert/ar6jC/
You can achieve what you want like this: Place your background at 0px 0px and define a gradient with more color-stops, having one solid color area at the top and then the actual gradient, like this:
background-position: 0px 0px;
background-image: linear-gradient(to bottom,
#FFFFFF 0px, /* Have one solid white area */
#FFFFFF 255px, /* at the top (255px high). */
#C4C7C9 255px, /* Then begin the gradient at 255px */
#FFFFFF 100% /* and end it at 100% (= body's height). */
);
(The sample code works on latest versions of Chrome and FireFox, but adapting it to support all major browsers and versions is straight-forward, applying the same principle.)
See, also, this short demo.
Here is the site in question
http://kryptodesigns.com/dev/forum.php?styleid=3
In FF, Chrome everything looks fine, pay attention to the Forum link in the navigation and how the red background expands past the grey navigation container.
Now look at the same link in IE, it cuts off the background color for the entire margin outside of the navigation container.
I have looked all over google for people with a similar issue with no luck.
Here is a pic of what i am talking about.
Any help on resolving this issue would be awesome.
Thank you for your help!
The problem is the filter in here:
#navtabs {
/* for non-css3 browsers */
background: #CDCFD0 url(kryptodesigns/KD0010/misc/navigation/navigation-repeat.png) top left repeat-x;
/* for IE */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#CDCFD0');
/* for webkit browsers */
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CDCFD0));
/* for firefox 3.6+ */
background: -moz-linear-gradient(top, #FFFFFF, #CDCFD0);
}
Having a filter causes an overflow: hidden-esque effect, which is why the top part of the li can't be seen.
To fix this, I recommend that you simply remove the filter, because you already have an image version of the same gradient.
I'm using following CSS to give gradient effect to the backGround but in IE it doesn't work. how can i make it work in IE8?
background: -moz-linear-gradient(bottom, #000000, #829a90);
background: -webkit-gradient(linear, left bottom, left top, from(#000000),to(#829a90) );
Tested on IE8 and its working:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000',
endColorstr='#829a90');
Also there are some limitations in giving gradient effect in IE because it doesn't supports color-stop and radial gradient. Also it's not guaranteed that all the browsers will support gradients thats why you shouldn't rely on gradient.