A problem has been reported that applying the transition from the CSS property `opacity: 0;` to `opacity: 1;` to elements on a web page in Mac Safari causes the screen to flicker in some environments.
This problem is believed to be caused by a rendering problem when the browser changes the transparency of the element from 0 to 1, resulting in a screen flicker.
Countermeasures
One way to solve the problem is to change the transparency value from a very small value (e.g. 0.01) to 1 instead of 0. In other words, change `opacity: 0;` to `opacity: 0.01;`.
With this modification, the browser will start the transition from an almost transparent state, rather than setting the element’s transparency to 0 completely. This avoids the rendering problems and screen flickering described above.
Here is an example of the modified CSS
.element {
opacity: 0.01;
transition: opacity 1s ease-in-out;
}
.element:hover {
opacity: 1;
}
This code changes the transparency of the `.element` from almost transparent (0.01) to fully opaque (1). The `transition` property controls the speed and pattern of the transparency change (here 1 second, using the `ease-in-out` easing function).
This is a description of the Opacity flicker problem in Mac Safari and how to fix it.