Sometimes when I encode a template, I come across the fact that I need to use a CSS transition from a color to a lost / transparent color for the background of the element. Of course, it is appropriate to use a solution using CSS gradient – in my case, specifically linear-gradient. So everyone can think of solving it in the following way.
Support for CSS gradients in browsers is relatively good and there is no reason not to use them.
However, with Safari we can notice only partial support and the problem lies in the use of banner colors in the gradient.
Bad rendering of a transparent transition in Safari
For example, I created & nbsp; this snippet on Codepen.io . The example shows two examples of solutions that will render identically in most browsers – the transition from red to transparent. However, if we open the snippet in Safari, you can see the difference and the problem of bad rendering at first glance, see the picture below.
It can be seen on the left that using the code I showed at the beginning, the result is not at all as we would expect. The transition is not from red to transparent, but rather to some gray. On the right you can see the correct display using a small hack.
Safari Solution
Solving a problem is relatively simple, although not everyone may immediately think of solving it in this way. As I mentioned, the problem is using the keyword transparent in our transition, which we need to replace. To do this, we will use the option of setting the color using the CSS rgba () function, which allows us to set the alpha channel of the color, ie its transparency. Thanks to this, we can use white and set it to full transparency. So the resulting code, which works properly in Safari, will look like this:
Leave a Reply