Элементы с позицией: относительные, а пути обрезки SVG не отображаются в Safari. ⇐ CSS
-
Anonymous
Элементы с позицией: относительные, а пути обрезки SVG не отображаются в Safari.
У меня есть веб-страница, на которой я использую путь обрезки 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.
Есть идеи?
У меня есть веб-страница, на которой я использую путь обрезки 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.
Есть идеи?
