CODEWITHSUNDEEP
google-chromesvgsvg-filters
Dominic Marra
Dominic Marra

Reputation: 1

SVG filter is cut off when the SVG is positioned over an element with translate3d

I have an SVG element that is absolute positioned, and whenever it is positioned over top an element that uses transform: translate3d(x, y, z) the drop shadow filter I have applied to it is cut off. This doesn't happen on Firefox but it does on chrome.

I made a Stackblitz of the issue: here

Upvotes: 0

Views: 158

Answers (1)

Michael Mullany
Michael Mullany

Reputation: 31715

You're triggering an edge case bug in Chrome that seems to occur only with a 0,0,0 translate. If you add a pixel of translation in any axis (e.g. transform: translate3d(0, 0, 1)) - it goes away.

Upvotes: 1

Related Questions