demo · v149

Developer Migration Guide

Chrome 149 blocks SVG filters from crossing the cross-origin boundary. If your site used SVG filters to create visual effects on embedded third-party content, here are the CSS alternatives — and which of them actually work on cross-origin iframes.

Affected: Any CSS rule that applies an SVG filter: url(#svgFilter) to a cross-origin <iframe> or plugin embed. The filter is silently dropped. Same-origin iframes and all other HTML content are not affected.

Live visual comparison — select a filter

SVG filter — BLOCKED on cross-origin iframe (Chrome 149)

iframe content

filter silently dropped

CSS filter — WORKS on cross-origin iframe (Chrome 149)

iframe content

CSS filter works

Note: in the SVG preview above, the filter renders for this same-origin demo element. On a real cross-origin iframe the filter would be stripped entirely — the iframe would look unfiltered.

Migration reference table

SVG filter effect	CSS filter replacement	Works on cross-origin?	Notes
`feGaussianBlur`	`filter: blur(Npx)`	Yes	Direct equivalent. CSS blur is hardware-accelerated.
`feColorMatrix (saturate)`	`filter: saturate(N%)`	Yes	Direct equivalent for saturation.
`feColorMatrix (hue rotate)`	`filter: hue-rotate(Ndeg)`	Yes	Direct equivalent.
`feColorMatrix (invert)`	`filter: invert(1)`	Yes	Direct equivalent.
`feComponentTransfer (gamma)`	`filter: brightness(N) contrast(N)`	Yes	Approximate. Gamma correction not exactly replicable.
`feDisplacementMap`	No CSS equivalent	No	Pixel displacement used in clickjacking. No CSS alternative exists — and this is intentional.
`feFlood + feComposite`	`backdrop-filter` or overlay `::before`	Partial	`backdrop-filter` applies to element background only; coloured overlays need an extra element.
`feMorphology (erode/dilate)`	No direct CSS equivalent	No	No CSS filter replaces morphology. Rethink the visual design.
`feTurbulence + feDisplacementMap`	No CSS equivalent	No	Distortion effects. No CSS replacement — use a wrapper element with CSS animation instead.
`feBlend (multiply)`	`mix-blend-mode: multiply`	Yes	CSS blending modes cover most blend operations.

Migration code patterns

Before (Chrome <149, blocked in 149+):

/* SVG filter defined inline or in <defs> */
<filter id="blur-filter">
  <feGaussianBlur stdDeviation="4" />
</filter>

/* Applied to iframe — BLOCKED on cross-origin in Chrome 149 */
iframe { filter: url(#blur-filter); }

After (works in all browsers including Chrome 149+):

/* Replace with CSS filter — no SVG needed */
iframe { filter: blur(4px); }

/* Combine CSS filters for complex effects */
iframe {
  filter: brightness(0.8) saturate(120%) blur(2px);
}

/* CSS filters work cross-origin — no security concern */
/* because they cannot extract pixel data from the frame */

see also