I am encountering an issue with my carousel of rounded images that have a gradient overlay. The problem is that sometimes the gradient doesn't follow the border-radius and extends beyond it in its default square shape, instead of conforming to the rounded edges. Surprisingly, I have not been able to replicate this problem on my own Mac, but one of my designers has reported experiencing this frequently on her Mac and iPhone:
https://i.sstatic.net/sYsKn.jpg
Below is the CSS code I am using for styling the image and gradient:
.carousel-image-container {
position: relative;
padding: 0px;
border-radius: 50%;
border: 6px solid white;
cursor: pointer;
}
.carousel-image-container img {
display: block;
width: 100%;
max-width: 100%;
border: 0;
margin: 0;
padding: 0;
border-radius: 50%;
}
.carousel-image-container::after {
display: block;
position: relative;
background-image: linear-gradient(to bottom, rgba(69, 72, 77, 0.07) 5%, rgba(69, 72, 77, 0.1) 8%, rgba(0, 0, 0, 1) 100%);
margin-top: -300px;
height: 300px;
width: 100%;
content: '';
}
Has anyone encountered a similar issue before? Any help or suggestions on how to resolve it would be greatly appreciated.