How can I avoid the gradient that is generated only in Chrome? - css

Question

This gradient from one color to another only happens in chrome.
In Firefox:
In Chrome:
The full code:
background: rgb(216, 216, 216);
background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 5%, rgba(216, 216, 216, 1) 33%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 1) 70%, rgba(216, 216, 216, 1) 70%, rgba(255, 255, 255, 1) 93%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, rgba(255, 255, 255, 1)), color-stop(33%, rgba(216, 216, 216, 1)), color-stop(33%, rgba(255, 255, 255, 1)), color-stop(70%, rgba(255, 255, 255, 1)), color-stop(70%, rgba(216, 216, 216, 1)), color-stop(93%, rgba(255, 255, 255, 1)));
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 5%, rgba(216, 216, 216, 1) 33%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 1) 70%, rgba(216, 216, 216, 1) 70%, rgba(255, 255, 255, 1) 93%);
background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 5%, rgba(216, 216, 216, 1) 33%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 1) 70%, rgba(216, 216, 216, 1) 70%, rgba(255, 255, 255, 1) 93%);
background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 5%, rgba(216, 216, 216, 1) 33%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 1) 70%, rgba(216, 216, 216, 1) 70%, rgba(255, 255, 255, 1) 93%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 5%, rgba(216, 216, 216, 1) 33%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 1) 70%, rgba(216, 216, 216, 1) 70%, rgba(255, 255, 255, 1) 93%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d8d8d8', endColorstr='#ffffff', GradientType=0);

Answer 1

Yesterday I stumbled upon a similar problem and decided to post my solution.
I am using SCSS but I really don't think it matters.
The idea is to use two maps: one with colors and one with stops.
Then iterate over the maps and generate multiple backgrounds.
TL;DR You can see the demo live here
I am using a mixin for this because I like to reuse things:
/**
* Create a single background image using CSS gradients
* without blur between color stops.
* This can be achieved with a single linear-gradient,
* but in only Firefox will render it properly.
* All other browsers will blur the edges of the stops.
*
* #param $colors - Map of colors
* #param $stops - Map of color stops
* #param $direction - One of 'horizontal' or 'vertical'
* #return - Multiple background declaration consisting of
* many linear gradients
*
* It's important that the keys of both maps are the same.
*/
#mixin rainbow($colors, $stops, $direction: 'horizontal') {
$dir: to right;
$background: '';
#if $direction == 'vertical' {
$dir: to bottom;
}
#each $name, $color in $colors {
$list: map-keys($colors);
$slash: unquote('/');
$index: index($list, $name);
$comma: unquote(', ');
#if $index == length($list) {
$comma: unquote('');
}
$offset: map-get($stops, $name);
$gradient: linear-gradient($dir, $color 0%, $color 100%);
$size: $offset 100%;
#if $direction == 'vertical' {
$size: 100% $offset;
}
// prettier-ignore
$background: $background + $gradient no-repeat 0% 0% $slash $size + $comma;
}
$background: unquote($background);
background: $background;
}
And then I am creating two maps - one with colors and one with color stops.
It's important to mention that the keys of the maps should be the same:
// DEMO
body {
background: black;
}
div {
$blue: blue;
$green: green;
$orange: orange;
$purple: purple;
$red: red;
$colors: (
'blue': $blue,
'green': $green,
'orange': $orange,
'purple': $purple,
'red': $red
);
$stops: (
'blue': 30%,
'green': 45%,
'orange': 62%,
'purple': 87%,
'red': 100%
);
height: 20px;
#include rainbow($colors, $stops);
}
Now let's see how will it work for your use case.
I am using a dummy span element:
span {
$white: #fff;
$gray: #d8d8d8;
$colors: (
'1': $white,
'2': $gray,
'3': $white,
'5': $gray
);
$stops: (
'1': 5%,
'2': 33%,
'3': 70%,
'5': 100%
);
height: 200px;
display: block;
#include rainbow($colors, $stops, 'vertical');
}

Answer 2

Use Browser prefixes for different browsers, for mozilla, go through this.
background: -moz-linear-gradient(top, rgba(255,255,255,1) 5%,rgba(216,216,216,1) 33%,rgba(255,255,255,1) 33%,rgba(255,255,255,1) 70%,rgba(216,216,216,1) 70%,rgba(255,255,255,1) 93%);

Answer 3

i had the same problem, here's a workaround i just found, at least works for me (Chrome 48.0):
For direction (first argument) use angle instead of descriptive direction, and for Chrome change the angle just slightly, like by 0.01deg. It won't be noticeable, but it will render crisp.
You can put it into browser specific property, so other browsers aren't affected (because it will work the other way around for them - slightly slanted direction will get you slightly blurry gradient).
Just bear in mind that -webkit-linear-gradient has different angle defaults: vertical 'to bottom' gradient equals 180deg angle value in other browsers, while in webkit it's -90deg.
Thus, for vertical gradient, add:
-webkit-linear-gradient(-89.99deg, colorstops....)
...and add it after linear-gradient, to override it, because Chrome reads both declarations (standard and vendor-prefixed)