CSS Linear Gradient Transparency Misbehaving Only in Safari

CSS linear gradient transparency misbehaving only in Safari

Instead of:

background: linear-gradient(to top, white, transparent);

Try setting your transparent to an rgba color value. For example:

background: linear-gradient(to top, white, rgba(255,255,255,0));

In other words, the rgb value of both colors should match. For example:

background: linear-gradient(to top, red, rgba(255,0,0,0));

As defined by the w3c spec, transparent is black transparent (rgba(0,0,0,0)). That means that when you are in the middle of the transition, some black should appear.

The color seen in Safari is the correct one, as per the specs.

CSS3 Gradient with transparency not displaying correctly in Safari

Try:
background: linear-gradient(rgba(255,255,255,0) 124px, #de6230);

Edit: sorry OP, that still doesn't look the same as your gradient although it is the correct colors, the gray middle just turned to a white middle. The solution I found was:

background: linear-gradient(rgba(222,98,48,0) 124px, #de6230);

222,98,48 is the rgb value of #de6230 so this should work. It's transitioning from your color at 0% alpha to your color at 100% alpha.

CSS Transform property not working in Safari correctly

transform-style and perspective must be used in conjunction with the transform property. Try something like this (add your transform values):

#cssmenu ul {
  -webkit-transform: "some value here";
  transform: "some value here";
  -webkit-perspective: 600px;
  -moz-perspective: 600px;
  perspective: 600px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

How do I solve this Invalid property value problem?

The background-clip property is not yet supported on Chrome without the -webkit prefix.

And the linear-gradient() side value should have the to keyword rather than just left.

With those additions, it should look something like this:

$gradient: linear-gradient(to left, #f542f5, #999);

h2 {
  font-size: 8rem;
  padding-top: 2rem;
  background: $gradient;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  display: inline-block;
}

Reference: Can I Use - background clip, MDN - CSS gradients

Broken D3 Visualization in Edge

The redScale (color) range is missing a '#' for F2D1D4:

.range(["F2D1D4","#D9767E","#D35F69","#CC4954","#BA0514"])

Can you try adding that?

.range(["#F2D1D4","#D9767E","#D35F69","#CC4954","#BA0514"])

Does that fix?

Background Fade In On Load

I would recommend a different setup if you want a background image to fade in on page load. You can have a separate div in a different flow than the rest of your page and have it animate to an opacity of 1 on page load.

HTML

<html>
<head> ... </head>
<body>
    <div class="page-bg"></div>
</body>
</html>

CSS

html, body {
    height: 100%;
    width: 100%;
}

body {
    position: relative;
}

.page-bg {
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: url(http://studi0.ml/EzJsucI.jpg) no-repeat center center fixed;
    background-size: cover;

    animation-name: fadeIn;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-duration: 1s;
    animation-fill-mode:forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

Of course you might need to add polyfills for the animation and keyframes declarations. (i.e. -moz-animation-name, -webkit-animation-name, etc..)

Here is a working example on Plunkr. I had to swap the image you used with one with a https link so there wouldn't be an issue loading it.

CSS How to make element in the middle to shrink before its sibling jumps down

Use flex-box if you're only targeting modern browsers else you can do something with css table layout for older browsers.

.wrapper {display:table;}
.wrapper div {display:table-cell; padding:10px;}
@media only screen and (max-width:300px) {
    .wrapper div {display:inline-block;}
}

Here's a snippet (below) but its much easier to resize in this jsFiddle

.wrapper {display:table;}.wrapper div {display:table-cell; padding:10px;}
@media only screen and (max-width:300px) {    .wrapper div {display:inline-block;}}

<div class='wrapper'>     <div class='first'>Your Quote</div>    <div class='second'>Please click to enable purchase</div>    <div class='third'>Buy now</div></div>

CSS Linear Gradient Transparency Misbehaving Only in Safari