I've been attempting to create an animation that changes the background color over an image. Everything seems to be working fine on all browsers and operating systems except for Safari on macOS. I've searched extensively on SO and Google but have yet to find a solution or workaround for this issue.
Below is an example of the problem. Please test it on Safari. For those without access to a Mac, there's a gif demonstrating the issue below.
.container {
width: 300px;
height: 300px;
position: relative;
}
.img {
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
z-index: -1;
background-image: url('https://picsum.photos/300');
}
.img::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #AD00D2;
opacity: 0.2;
z-index: -1;
-webkit-transition: opacity 0.4s, background-color 0.4s;
-moz-transition: opacity 0.4s, background-color 0.4s;
transition: opacity 0.4s, background-color 0.4s;
}
.container:hover .img::before {
background-color: #AD00D2;
opacity: 0.6;
}
.text {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
line-height: 1.2;
padding: 2rem 0;
}
.text::before {
display: block;
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: -moz-linear-gradient(280deg, #F12958, #AD00D2);
background: linear-gradient(170deg, #F12958, #AD00D2);
opacity: 0.8;
z-index: -1;
}<div class="container">
<div class="img"></div>
<div class="text">Text content</div>
</div>