клип-путь в цикле не работает должным образом в сафари - PullRequest
Новая
       37

клип-путь в цикле не работает должным образом в сафари

0 голосов
/ 19 февраля 2019

У меня есть список обрезанных элементов.Я использую метод CSS3 clip-path , чтобы закрепить изображение в SVG-пути.Обрезка работает отлично, но в

сафари (V 12.1.4) положение обрезанного элемента изменяется в каждом поле.

Элемент перемещается в болееслева внизу на каждом следующем слайде. 

.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);
}

.clip-path_clipping2 {
  -webkit-clip-path: url(#clipping2);
  clip-path: url(#clipping2);
}

.clip-path_clipping3 {
  -webkit-clip-path: url(#clipping3);
  clip-path: url(#clipping3);
}

.clip-path_clipping4 {
  -webkit-clip-path: url(#clipping4);
  clip-path: url(#clipping4);
}

.clip-path_clipping5 {
  -webkit-clip-path: url(#clipping5);
  clip-path: url(#clipping5);
}

.clip-path_clipping6 {
  -webkit-clip-path: url(#clipping6);
  clip-path: url(#clipping6);
}

.clip-path_clipping7 {
  -webkit-clip-path: url(#clipping7);
  clip-path: url(#clipping7);
}

.clip-path_clipping8 {
  -webkit-clip-path: url(#clipping8);
  clip-path: url(#clipping8);
}

.clip-path_clipping9 {
  -webkit-clip-path: url(#clipping9);
  clip-path: url(#clipping9);
}

.clip-path_clipping10 {
  -webkit-clip-path: url(#clipping10);
  clip-path: url(#clipping10);
}

.svg-clip {
  position: absolute;
  opacity: 1;
  pointer-events: none;
  max-width: 100%;
  max-height: 100%;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<div style="width:2500px;">
<a href="#" class="product-slider">
                                <div class="product-slider__image-wrapper">

                                    <img class="product-slider__image clip-path_clipping1" src="https://placeimg.com/1000/1000/any" alt="">
                                    <svg class="svg-clip">
                                        <defs>
                                            <clipPath id="clipping1" data-clipping-rotate="" class="svg-clip__path" clipPathUnits="objectBoundingBox" style="transform: rotate(3deg) skew(9deg) scale(0.95);">
                                                <path d="M0.785,0.075C0.52-0.031,0.337-0.022,0.141,0.185s-0.187,0.534,0.02,0.73s0.48-0.023,0.676-0.23
                        C1.034,0.478,1.092,0.198,0.785,0.075z"></path>
                                            </clipPath>
                                        </defs>
                                    </svg>
                                </div>
                               
                            </a>
<a href="#" class="product-slider">
                                <div class="product-slider__image-wrapper">

                                    <img class="product-slider__image clip-path_clipping2" src="https://placeimg.com/1000/1000/any" alt="">
                                    <svg class="svg-clip">
                                        <defs>
                                            <clipPath id="clipping2" data-clipping-rotate="" class="svg-clip__path" clipPathUnits="objectBoundingBox" style="transform: rotate(3deg) skew(9deg) scale(0.95);">
                                                <path d="M0.785,0.075C0.52-0.031,0.337-0.022,0.141,0.185s-0.187,0.534,0.02,0.73s0.48-0.023,0.676-0.23
                        C1.034,0.478,1.092,0.198,0.785,0.075z"></path>
                                            </clipPath>
                                        </defs>
                                    </svg>
                                </div>
                               
                            </a>
<a href="#" class="product-slider">
                                <div class="product-slider__image-wrapper">

                                    <img class="product-slider__image clip-path_clipping3" src="https://placeimg.com/1000/1000/any" alt="">
                                    <svg class="svg-clip">
                                        <defs>
                                            <clipPath id="clipping3" data-clipping-rotate="" class="svg-clip__path" clipPathUnits="objectBoundingBox" style="transform: rotate(3deg) skew(9deg) scale(0.95);">
                                                <path d="M0.785,0.075C0.52-0.031,0.337-0.022,0.141,0.185s-0.187,0.534,0.02,0.73s0.48-0.023,0.676-0.23
                        C1.034,0.478,1.092,0.198,0.785,0.075z"></path>
                                            </clipPath>
                                        </defs>
                                    </svg>
                                </div>
                               
                            </a>
<a href="#" class="product-slider">
                                <div class="product-slider__image-wrapper">

                                    <img class="product-slider__image clip-path_clipping4" src="https://placeimg.com/1000/1000/any" alt="">
                                    <svg class="svg-clip">
                                        <defs>
                                            <clipPath id="clipping4" data-clipping-rotate="" class="svg-clip__path" clipPathUnits="objectBoundingBox" style="transform: rotate(3deg) skew(9deg) scale(0.95);">
                                                <path d="M0.785,0.075C0.52-0.031,0.337-0.022,0.141,0.185s-0.187,0.534,0.02,0.73s0.48-0.023,0.676-0.23
                        C1.034,0.478,1.092,0.198,0.785,0.075z"></path>
                                            </clipPath>
                                        </defs>
                                    </svg>
                                </div>
                               
                            </a>
<a href="#" class="product-slider">
                                <div class="product-slider__image-wrapper">

                                    <img class="product-slider__image clip-path_clipping5" src="https://placeimg.com/1000/1000/any" alt="">
                                    <svg class="svg-clip">
                                        <defs>
                                            <clipPath id="clipping5" data-clipping-rotate="" class="svg-clip__path" clipPathUnits="objectBoundingBox" style="transform: rotate(3deg) skew(9deg) scale(0.95);">
                                                <path d="M0.785,0.075C0.52-0.031,0.337-0.022,0.141,0.185s-0.187,0.534,0.02,0.73s0.48-0.023,0.676-0.23
                        C1.034,0.478,1.092,0.198,0.785,0.075z"></path>
                                            </clipPath>
                                        </defs>
                                    </svg>
                                </div>
                               
                            </a>
</div>

Это ссылка на кодовый блок

Кто-нибудь, пожалуйста, помогите мне разобраться с этой проблемой?Заранее спасибо.

1 Ответ

0 голосов
/ 19 февраля 2019

Это выглядит хорошо для меня.Протестировано с Safari V. 12.0.1

Какой Safarie вы используете?

Снимок экрана - CodePen

...