Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS linear gradient no longer working in safari 11 (high sierra) Reply To: linear gradient no longer working in safari 11 (high sierra)

#260763
Atelierbram
Participant

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.