Search code examples
csssafari

What happens in Safari with the transparent color?

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?

Solution

  • 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 that 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.