Encountering an issue on my website with a video link here.
The problem is specific to Safari.
Below is the HTML code:
<div class="item">
<div class="img-wrapper">
<img class='img'>
</div>
</div>
And here is the CSS:
.img-wrapper {
width: 220px;
height: 220px;
border: solid 8px #ffffff;
border-radius: 110px;
overflow: hidden;
}
.img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-webkit-transition: 0.2s;
transition: 0.2s;
border-radius: 110px;
}
.item:hover .img-wrapper img {
transform: scale(1.1);
}
Issue only occurs on Safari, where the image fails to zoom in properly within the border. Works fine on other browsers.