Элементы с позицией: относительные с дорожками клипов SVG, не отображающимися в Safari

Question

У меня есть веб-страница, в которой я использую путь клипа SVG, применяемый к одному из HTML-элементов страницы.

SVG элемент:

<svg height="0" width="0"> 
    <defs> 
     <clipPath id="clip"> 
      <path d="M150 0 L75 200 L225 200 Z" /> 
     </clipPath> 
    </defs> 
</svg> 

HTML элемент путь обрезки применяется к

<div id="clipMe"> </div>

CSS определения клипа,

#clipMe { 
    clip-path: url(#clip); 
    -webkit-clip-path: url(#clip); 
    width: 200px; 
    height: 200px; 
    background-color: red; 
} 

На той же странице, у меня есть различные элементы, некоторые из которых расположены относительно друг друга:

<div style="position: relative"> 
    <strong>My parent is relative</strong> 
</div> 

В Safari (8.0.4) только эти относительно позиционируемые элементы не отображаются до тех пор, как связь с #clipMe div в clipPath (внутри элемента SVG) не поврежден.

Последние версии дисплеев FF и Chrome, как и ожидалось.

Изменение свойства position: на все, кроме относительного, отображает все, как ожидалось.

Отключение обтравочного контура (либо путем удаления элемента SVG вместе, либо удаления свойства clip-path: из CSS) отображает все так, как ожидалось.

JSfiddle:

Опять же, это только Safari. Мне потребовалось некоторое время, чтобы изолировать его до того, что он будет обрезать SVG и position: relative, поэтому я предполагаю, что могут быть другие ситуации с похожими результатами.

Неужели кто-нибудь сталкивается с этим или имеет какие-либо предложения по отображению этих относительно позиционированных s?

EDIT
Возможно, это предмет Mac. Хотя он отображается как ожидается в Chrome и Firefox в OSX, он не отображает относительно позиционированные DIV в любом браузере на iOS.

Любые идеи?

Answer 1

Try с помощью -webkit-transform:translateZ(1px) на обрезанный элемента. Если он не отображается на мобильном телефоне, вам может потребоваться включить и другие префиксы. Demo

Это заставляет аппаратное ускорение (по сути, браузер уделяет больше внимания его рендерингу), помещая его на графический процессор.

Answer 2

две вещи:

1. с использованием CSS набора отображения: блок; на любую вещь, которая является позицией: относительная;
2. попробуйте очистить: both; на все, что есть позиция: относительная;

У меня нет версии для сафари, которую вы используете для тестирования в данный момент, но я знаю из предыдущего опыта при работе с позицией: relative; вам может потребоваться очистить или установить отображение для блокировки.

РЕДАКТОРА: возможно, проблема была обнаружена.

Поддержка браузера для клип-пути является частичным в сафари http://caniuse.com/#feat=css-clip-path

Вы должны нам приставкой -webkit-клип-путь: