Я пытаюсь сделать сложный градиентный фон для div.Mozilla, IE, Edge показывают это нормально.Но в Chrome и Opera я вижу потрясающие результаты.Полосы градиента выглядят размытыми.И некоторые полосы находятся не в том месте.
Вот пример (пожалуйста, разверните на полной странице):
/*jshint strict: false*/
/*globals $:false*/
/*jshint multistr: true*/
$(function() {
function drawGradient(stripeColor, stripeLength, backgroundColor, backgroundLength, count, angle) {
var gradients;
gradients = "linear-gradient(" + angle + ", ";
for (i = 1; i <= count; i++) {
gradients += stripeColor + " " + ((stripeLength + backgroundLength) * (i - 1)).toFixed(2) + "px, ";
gradients += stripeColor + " " + ((stripeLength + backgroundLength) * (i - 1) + stripeLength).toFixed(2) + "px, "; //alert((stripeLength + backgroundLength) * (i - 1) + stripeLength + "px, ");
gradients += backgroundColor + " " + ((stripeLength + backgroundLength) * (i - 1) + stripeLength).toFixed(2) + "px, ";
gradients += backgroundColor + " " + ((stripeLength + backgroundLength) * (i - 1) + stripeLength + backgroundLength).toFixed(2) + "px, ";
}
gradients += "rgba(0, 0, 0, 0) " + ((stripeLength + backgroundLength) * (count - 1)+ stripeLength + backgroundLength).toFixed(2) + "px)";
return gradients;
}
function drawRadialGrad(stripeColor, stripeLength, backgroundColor, backgroundLength, count, position, size) {
var gradients;
gradients = "radial-gradient(" + "circle " + size + "px " + "at " + position + ", ";
for (i = 1; i <= count; i++) {
gradients += stripeColor + " " + ((stripeLength + backgroundLength) * (i - 1)).toFixed(2) + "%, ";
gradients += stripeColor + " " + ((stripeLength + backgroundLength) * (i - 1) + stripeLength).toFixed(2) + "%, "; //alert((stripeLength + backgroundLength) * (i - 1) + stripeLength + "%, ");
gradients += backgroundColor + " " + ((stripeLength + backgroundLength) * (i - 1) + stripeLength).toFixed(2) + "%, ";
gradients += backgroundColor + " " + ((stripeLength + backgroundLength) * (i - 1) + stripeLength + backgroundLength).toFixed(2) + "%, ";
}
gradients += "rgba(0, 0, 0, 0) " + ((stripeLength + backgroundLength) * (count - 1)+ stripeLength + backgroundLength).toFixed(2) + "%)";
return gradients;
}
grad = drawGradient("#777", 2, "#ccc", 20, 10, "-45.1deg");
grad += ", " + drawGradient("#777", 2, "#ccc", 40, 13, "167deg");
grad += ", " + drawRadialGrad("#777", 1, "#ccc", 10, 10, "40% 60%", 200);
$(".gradient").css("background", grad);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="behavior.js"></script>
</head>
<body>
<div class="gradient" style="height: 100vh;"></div>
</body>
</html>
Кто знает какие-либо обходные пути?