Не работает обрезка clip-path для анимированного элемента с transform в Chrome и Opera

[chester40]

Здравствуйте. Прошу помочь в решении следующей задачи:

Имеется родительский элемент со свойством clip-path и дочерний элемент с анимацией:

Для примера:

HTML

<div id="logoimage-waves">
     <div id="waves-animated"></div>
</div>
 
<svg>
       <clipPath id="WavesPolygon">
             <polygon points="0 0,95 0,95 8,80 5,60 10,40 15,20 20">
             </polygon>
       </clipPath>
</svg>

 

CSS

#logoimage-waves {
    width: 100px;
    height: 100px;
    clip-path: url("#WavesPolygon");
    -webkit-clip-path: polygon(0px 0px,95px 0px,95px 8px,80px 5px,60px 10px,40px 15px,20px 20px);
    position: absolute;
}
 
#waves-animated {
    width: 100px;
    height: 100px;
    position: absolute;
    background: url(/images/waves.png) no-repeat;
    animation: waves-animation 40s;
}
 
@keyframes waves-animation {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(-360deg);
    }
}

 

Вопрос следующий:

В Firefox всё работает как надо, дочерний анимированный элемент обрезается с помощью свойства clip-path родительского элемента. Но в других браузерах (проверял в Chrome 55 и Opera 41) обрезка не работает и элемент показывается полностью. Причём, что важно, это происходит только в том случае, если дочерний элемент анимирован с помощью свойства transform, а если анимируется другое свойство, например margin, то обрезка работает во всех браузерах. Короче говоря: дочерние элементы анимированные с помощью transform не обрезаются с помощью clip-path родительского элемента в Хроме и Опере.

В общем задачка та еще. Второй день пытаюсь решить )

Благодарю за внимание!

[Igor Schnaider]

В общем, методом тыка пришел к тому, что нужно дублировать свойство в атрибуте style. ¯\_(ツ)_/¯
https://codepen.io/anon/pen/RgJyrB

Новый Firefox уже поддерживает clip-path: polygon, для старых нужен fallback на SVG. IE и Edge вообще никак.

[AlexZaw]

как решить проблему я не знаю, но возможно вы этого не видели -

поддержка clip-path 

Global 1.48%+86.92%=88.4%

unprefixed: 1.48%+57.2%=58.69%

 

[Igor Schnaider]

6 минут назад, chester40 сказал:

Благодарю за потраченное время! У меня заработало в старом Firefox, но всё еще не работает в Хроме и Опере.

Ну я оставил там в примере комментарий: как вариант, вращать элемент <image> в самом SVG, а маску применить к обертке. Вообще, с этим clip-path постоянно какие-то странности :-) Каждый раз для себя что-то новое открываю.

[Igor Schnaider]

Попробуйте с objectBoundingBox:

<svg>
  <defs>
    <clipPath id="WavesPolygon" clipPathUnits="objectBoundingBox">
      <polygon points="0 0, .95 0, .95 .08, .8 .05, .6 .1, .4 .15, .2 .2"></polygon>
    </clipPath>
  </defs>
</svg>

 

[chester40]

16 часов назад, Igor Schnaider сказал:

Попробуйте с objectBoundingBox:

<svg>
  <defs>
    <clipPath id="WavesPolygon" clipPathUnits="objectBoundingBox">
      <polygon points="0 0, .95 0, .95 .08, .8 .05, .6 .1, .4 .15, .2 .2"></polygon>
    </clipPath>
  </defs>
</svg>

 

К сожалению не помогло. Еще выяснилось что в Firefox 50 тоже не работает.

[chester40]

4 часа назад, AlexZaw сказал:

как решить проблему я не знаю, но возможно вы этого не видели -

поддержка clip-path 

Global 1.48%+86.92%=88.4%

unprefixed: 1.48%+57.2%=58.69%

 

Спасибо за информацию, не знал о таком.

4 часа назад, Igor Schnaider сказал:

В общем, методом тыка пришел к тому, что нужно дублировать свойство в атрибуте style. ¯\_(ツ)_/¯
https://codepen.io/anon/pen/RgJyrB

Новый Firefox уже поддерживает clip-path: polygon, для старых нужен fallback на SVG. IE и Edge вообще никак.

У меня заработало в старом Firefox, но всё еще не работает в Хроме и Опере.

В связи со всем вышеизложенным не стал дальше извращаться и решил вопрос с помощью gif анимации ) Так надёжнее )

Всем спасибо за помощь!

Edited July 5, 2017 by chester40

[chester40]

7 минут назад, Igor Schnaider сказал:

Ну я оставил там в примере комментарий: как вариант, вращать элемент <image> в самом SVG, а маску применить к обертке. Вообще, с этим clip-path постоянно какие-то странности :-) Каждый раз для себя что-то новое открываю.

Да уж, думаю рано пока еще clip-path использовать, если кроссбраузерность хорошая нужна ) А то в каком-нибудь браузере косяк да вылезет)