5

There is a block in which text is closer to the end gradually disappears. This is done using the ::after, which is given linear-gradient from the transparent color to the background color. Recently noticed that in current versions of browsers, all is well, everywhere except safari (and in the 11th, too bad). Autoprefix not solution (he's here and not needed).

My code:

* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  min-height: 100vh;
}

p {
  margin: auto;
  width: 40vw;
  height: 40vh;
  max-width: 300px;
  max-height: 300px;
  overflow: hidden;
  position: relative;
}

p::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50%;
  background-image: linear-gradient(transparent 0, white 100%);
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel urna efficitur, tempor felis eu, lacinia sem. Nulla lacinia tincidunt turpis, faucibus luctus leo. Mauris lobortis orci lacus, vel luctus leo venenatis ac. Phasellus feugiat urna sit
  amet nisi dapibus, a dignissim nibh dignissim. Suspendisse vel tempor nisl. Pellentesque hendrerit, nibh non vehicula finibus, turpis tellus auctor purus, ac placerat magna elit vel mauris. Nullam viverra venenatis enim. Vivamus odio lectus, maximus
  quis dolor et, lobortis ullamcorper velit. Nulla fringilla ligula a metus faucibus commodo non ac lectus. Aenean bibendum arcu eu nibh convallis ornare.</p>

Decides to replace transparent with rgba(255,255,255,0). But this is abnormal behavior, and a crutch in my opinion.

Any ideas?

Andrei Fedorov
  • 3,689
  • 2
  • 13
  • 25
  • 4
    `transparent` used to be equivalent to `rgba(0, 0, 0, 0)` in the past, and apparently still is in Safari. It’s more reliable to use `rgba(255, 255, 255, 0)` instead. – Sebastian Simon Sep 19 '17 at 21:16

1 Answers1

10

I don't know of any drawbacks of using RGBA(255, 255, 255, 0) and if that's working for you, I think you should use it. That's the better method, because it doesn't rely on the browser to determine which is the color with 0 opacity like the transparent keyword does.

The problem, which you're experiencing, is due to the fact that the latest version of Safari thinks that the color meant by transparent is gray and the other big browsers think it's the same as the background color of the element, which in your case is white.

To prevent unexpected behavior, such as in gradients, the current W3C spec states that transparent should be calculated in the alpha-premultiplied color space. However, be aware that some older browsers may treat it as black with an alpha value of 0 and apparently the latest version of Safari does something similar.

To answer the OP's comment:

There is no such thing as colorless transparency and the example with gradients shows this perfectly.

For example, Mozilla's MDN Web Docs says:

The transparent keyword represents a fully transparent color. This makes the background completely visible. Technically, transparent is a shortcut for rgba(0,0,0,0).

The keyword represents a color, although a fully transparent one, but still a color.

Azanyr
  • 197
  • 1
  • 9
  • It's interesting that other browsers don't think `transparent` is `rgba(255,255,255,0)`. They are creating real transparency, colorless. It can be shown for example if the parent background is not white. My gradient background gets from transparent to the parental background, and the color of the parent background ask seems to be no problem. If it wasn't set via `hex`. The conversion of `hex` to `rgb` in all css this is a big problem. – Andrei Fedorov Sep 19 '17 at 21:40
  • Thank you for noting this. I've edited my answer to clarify further. – Azanyr Sep 19 '17 at 21:56