linear gradient no longer working in safari 11 (high sierra)

[zorrolynx]

Hi, I had this code:

-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(white), color-stop(0.8, #fff));

and it worked great in safari and chrome but I upgraded to MAC OS High Sierra and Safari 11 and it no longer works. it works in chrome but not in safari.

http://getcake.com/blog/ (it is the little box that fades the text excerpt to white.)

Any ideas what changed?

[Atelierbram]

The code can be more sturdy if you use the newer syntax for linear-gradients and if you define that gradient as a background-image ISO a value for the content property on the pseudo element. So ISO this:

.block .block-content .the-excerpt::before {
  content: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0)), color-stop(0.8, rgb(255, 255, 255)), to(white));
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 35px;
}

Something like this:

.block .block-content .the-excerpt::before {
  content: "";
  position: absolute;
  right:0;bottom:0;left:0;
  width: 100%;
  height: 35px;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
}

Now let a build tool like autoprefixer take care of different prefixes for older browsers.

[zorrolynx]

Brilliant!
Thank you so much, it worked great!
I just added 80% at the end of the #fff to account for the color-stop and now it is exactly as it was before.

.block .block-content .the-excerpt::before {
content: “”;
position: absolute;
right:0;bottom:0;left:0;
width: 100%;
height: 35px;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 80%);
}

[zorrolynx]

btw, how did you get your code to be displayed in that cool little black box with the css in the orange bar?

[Atelierbram]

Comments over here support markdown. This will work with inline markdown like italic , bold, or code using surrounding underscores, asterisks and backticks. The syntax-highlighted code-block can be done with so called fenced code blocks . Three backticks and the name of the language, like css, and after that a new line – the code – and again three backticks on a new line.

[Author]

Posts