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

[Anonymous]

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

Элемент SVG:

HTML-элемент, к которому применяется обтравочный контур



CSS, определяющий клип

#clipMe { путь к клипу: URL (#clip); -webkit-clip-path: URL (#clip); ширина: 200 пикселей; высота: 200 пикселей; цвет фона: красный; } На одной странице у меня есть различные элементы, некоторые из которых расположены относительно друг друга:

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

Последние версии FF и Chrome отображаются так, как ожидалось.

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

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

JSfiddle:

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

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

ИЗМЕНИТЬ
Возможно, это особенность Mac. Хотя он отображается должным образом в Chrome и Firefox в OSX, он не отображает относительно расположенные элементы DIV ни в одном браузере на iOS.

Есть идеи?