I ran into an issue where safari doesn't want to apply svg filters to a child element that is animated. It seems like an you can animated the parent of an element with a filter applied (second example), but you can't apply the filter to the parent of an animated element (the first example.
Is this just a limitation of safari? Are there any workarounds that still allow the container to apply the filter? Thank you!
For context, I'm working with a 3D cube and as you can see applying the filter to the parent allows for a more 3D effect, and in my case a consistent filter applied to all the sides of the cube which are all separate divs
@keyframes rotate-animation {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(359deg);
}
}
@keyframes filter-animation {
from {
filter: url("#turbulence-1");
}
to {
filter: url("#turbulence-2");
}
}
.container {
animation: filter-animation 0.25s linear infinite alternate;
width: fit-content;
}
.square {
animation: rotate-animation 10s linear infinite;
width: 100px;
height: 100px;
background: black;
}<body>
<svg display="none">
<defs>
<filter id="turbulence-1">
<feTurbulence type="fractalNoise" baseFrequency="0.02" numOctaves="2" data-filterId="3" />
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" scale="25" />
</filter>
<filter id="turbulence-2">
<feTurbulence type="fractalNoise" baseFrequency="0.03" numOctaves="2" data-filterId="3" />
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" scale="25" />
</filter>
</defs>
</svg>
<div class="container">
<div class="square"></div>
</div>
</body>@keyframes rotate-animation {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(359deg);
}
}
@keyframes filter-animation {
from {
filter: url("#turbulence-1");
}
to {
filter: url("#turbulence-2");
}
}
.container {
animation: rotate-animation 10s linear infinite;
width: fit-content;
}
.square {
animation: filter-animation 0.25s linear infinite alternate;
width: 100px;
height: 100px;
background: black;
}<body>
<svg display="none">
<defs>
<filter id="turbulence-1">
<feTurbulence type="fractalNoise" baseFrequency="0.02" numOctaves="2" data-filterId="3" />
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" scale="25" />
</filter>https://stackoverflow.com/questions/ask#
<filter id="turbulence-2">
<feTurbulence type="fractalNoise" baseFrequency="0.03" numOctaves="2" data-filterId="3" />
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" scale="25" />
</filter>
</defs>
</svg>
<div class="container">
<div class="square"></div>
</div>
</body>