Gradient not displaying correctly in Microsoft Edge

user_10369704 0
Viewed 6048

There is an ADOBE illustrator generated gradient and the CSS code is as below: 

.firs{
    background: #4B79A1;
    background : -moz-linear-gradient(.....) 100%);
    background : -webkit-linear-gradient(.....) 100%);
    background : -webkit-gradient(....),color-stop(.....) ));
    background : -o-linear-gradient(.....) 0%, rgba(......) 0%, rgba(......) 25.17%, rgba(.........) 50.5%, rgba(.......) 75.17%, rgba(.......) 100%);
    background : -ms-linear-gradient(........) 0%, rgba(........) 0%, rgba(.........., 1) 25.17%, rgba(............., 1) 50.5%, rgba(..........., 1) 75.17%, rgba(............., 1) 100%);
}

the gradient CSS runs smoothly in Chrome and Firefox, but in Edge, it becomes like this.

Is there any way to solve this problem?

microsoft-edge gradient css html
2 Answers

You have to check your rgba() function. By convention rgb is the mixture or color panel of red-green-blue colors to produce different type of color. But a(alpha) is used to optimize the color visualization. 1 is set to true which 100% or visible, 0 is set to false which is invisible.

As I can see in your code, -ms-linear-gradient(......., 1). You need to understand that linear-gradient() function uses top-down, left-right, right-left or bottom-up approaches. In your case, you are using top-down approach. But the problem is you are using 100% opacity with edge and you cannot get the gradient correctly.

Try to optimize your linear function with something like this: -ms-linear-gradient(......., 0.5) or -ms-linear-gradient(......., 0.45) which is literally translated as 50% or 45% alpha linear.

user_92057510

Did you try code from gradient generator? I think code like below should works

linear-gradient(to right, rgba(...) 0%, rgba(...) 50%, rgba(...) 51%, rgba(...) 100%)
user_66862050
Related