My list of clipped elements is causing an issue when using the CSS3 clip-path method to clip an image into an SVG path. The clipping works perfectly, but in Safari (V 12.1.4), the position of the clipped element changes with each box.
The element is shifting more towards the bottom left with each subsequent slide.
.product-slider {
display: inline-block;
transition: all 0.4s;
background: none;
height: 100%;
border: 1px solid red;
width: 256px;
height: 248px;
}
.product-slider__image {
width: 100%;
}
.product-slider__image-wrapper {
width: 100%;
height: 100%;
position: relative;
}
.clip-path_clipping1 {
-webkit-clip-path: url(#clipping1);
clip-path: url(#clipping1);
}
...
</div>Please can someone help me resolve this issue? Thank you in advance.