1

сверстал сайт. активно пользовался clip-path + svg. а потом посмотрел в safari, а там все clip-path игнорированы. даже не смотря на -webkit- префикс и transform: translateZ(0).

.header {
  width: 100%;
  background-color: red;
  position: absolute;
  z-index: 100;
  margin-bottom: -200px;
  clip-path: circle(10px at 50% 50%)/*url("#headerclip")*/
  ;
}

#clips {
  transform: translateZ(0) !important;
}

#clips clipPath {
  transform: translateZ(0) !important;
}
<div class="header"><svg id="clips" preserveAspectRatio="none" viewBox="0 0 200 100" width="100%" height="100%">
  <defs>
    <clipPath id="footerclip" clipPathUnits="objectBoundingBox">
     <path   d="M0,0 0,1 1,1 1,0 Q0.5,0.3  0,0 z"></path>   
    </clipPath>
  </defs>
</svg>
</div>

2 ответа 2

1

проблему нашел в конфликте с metro ui

2
  • Это вполне ответ.
    – Qwertiy
    17 ноя 2017 в 16:47
  • 2
    Будет прекрасно, если вы распишете про этот конфликт подробнее: его причины, проявление и то, как вы его решили. 18 ноя 2017 в 0:45
1

В clipPath вместо path используете polygon.

.header {
  width: 100%;
  background-color: red;
  position: absolute;
  z-index: 100;
  margin-bottom: -200px;
  clip-path: circle(10px at 50% 50%)/*url("#headerclip")*/
  ;
}

#clips {
  transform: translateZ(0) !important;
}

#clips clipPath {
  transform: translateZ(0) !important;
}
<div class="header"><svg id="clips" preserveAspectRatio="none" viewBox="0 0 200 100" width="100%" height="100%">
  <defs>
    <clipPath id="footerclip" clipPathUnits="objectBoundingBox">
     <polygon   points="M0,0 0,1 1,1 1,0 Q0.5,0.3  0,0 z" />
    </clipPath>
  </defs>
</svg>
</div>

1
  • Ничего не изменилось. Смотрел страничку в Сафари - глюк на месте 16 ноя 2018 в 13:52

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.