clip-path не работает в FireFox

[BAntDit]

Здравствуйте, 

 

Я пытаюсь отсекать края div-а по rectangle-у. Для этого использую clip-path.

Делаю следующее: 

 

На странице: 

<svg height="0">			<clipPath id="c1" clipPathUnits="objectBoundingBox">				<rect x="0.148" y="0.0" width="0.705" height="1.0"/>			</clipPath>		</svg>

в css:

 

.scroll-bar-wrapper {position: absolute;z-index: 100;}.scroll-bar { clip-path: url(#c1); -webkit-clip-path: inset(0px 200px 0px 200px); overflow: hidden; height: 64px; width: 1360px; }

 

сам div с классом scroll_bar создается на странице динамически - т.е. на страницу добавляется html код:

 

<div style="top: 650px; left: -200px; width: 1160px; height: 64px;" class="scroll-bar-wrapper" id="scroll_bar_wrapper"><div class="scroll-bar" id="swatches_scroll_bar"> // к этому div-у должен применяться clip-path<div style="position: relative;" class="scroll-bar-item ui-draggable"><img src="./assets/materials/mat1.png"></div><div style="position: relative;" class="scroll-bar-item ui-draggable"><img src="./assets/materials/mat2.png"></div>...</div></div>

Во всех браузерах все работает отлично, кроме FireFox.

 

Подскажите как это заставить работать в FF. 

Edited April 22, 2015 by BAntDit

[Kelenar]

caniuse.com подсказывает, что у Firefox  другой синтаксис данного свойства. 

В Firefox clip-path реализован только с путями, объявленными через SVG в остальных браузерах используется синтаксис который Вы описали в своем примере. Тут есть пример использования Пример №1 , Пример №2

[BAntDit]

Firefox  другой синтаксис данного свойства. 

 

 У меня clip-path указан отдельно для Chrome вот так: -webkit-clip-path: inset(0px 200px 0px 200px); и отдельно для FF, вот так: clip-path: url(#c1); - собсно это и есть синтаксис с путями.

 

Кстати даже если для Chrome использовать svg и синтаксис с путями то в хроме все работает, а вот в FF никак. 

 

Приведенные ваше примеры тоже работаю в FF. 

 

Но когда я пытаюсь clip-path-ы применять к динамически созданным элементам, в FireFox ничего не работает. 

Edited April 22, 2015 by BAntDit

[SelenIT]

А если поменять единицы clipPath c objectBoundingBox на userSpaceOnUse и задать их в пикселях, как для Хрома? И еще чуть смущает height="0" у самой SVGшки. Вообще живой пример проблемы бы увидеть...

[BAntDit]

А если поменять единицы clipPath c objectBoundingBox на userSpaceOnUse и задать их в пикселях, как для Хрома?

 

Что-то тоже не помогло.

 

Вообще живой пример проблемы бы увидеть...

 

Пока есть проблемы,с тем чтобы вытащить весь проект на внешку с локального сервера. Чуть позжее сверстаю отдельный пример, где только применяется этот clipPath и выложу.