Bug 291190 – SVG filtered background via filter() on input image box unless explicitly specifying filter size

• Status: NEW
• Component: SVG

[Ana Tudor]

Created attachment 474855 [details]
screenshot of the Epiphany result

Set a `background`  on the `html` with a filtered (using `filter()`) `background-image` (this could be an actual image or a CSS gradient, doesn't matter) and a `background-color`:

```
html {
	height: 100%;
	background: 
		filter(conic-gradient(#8cb369, #0000), url(#f)) 
		#bc4b51
}
```

The SVG `filter` is a simple one adding noise:

```
<svg>
  <filter id='f'>
    <feTurbulence type='fractalNoise' baseFrequency='7.13'/>
    <feBlend in2='SourceGraphic'/>
  </filter>
</svg>
```

I would expect to see the grainy `conic-gradient()` covering the entire page, but this doesn't happen, only a part of it is covered, *though the grain effect produced by `feTurbulence` covers the entire viewport!*

Explicitly setting the `background-size` to `100vw 100vh` doesn't help.

If I remove the `filter()`:

```
background: conic-gradient(#8cb369, #0000) #bc4b51
```

the CSS gradient covers the entire viewport.

If I use a CSS `filter` instead of an SVG one:

```
 background: filter(conic-gradient(#8cb369, #0000), blur(5px))  #bc4b51
```

the blurred CSS gradient covers the entire viewport.

If I use an actual image (`url(image.jpg)`) instead of a CSS gradient, there is still the same problem of the image not covering the entire viewport with an SVG `filter` applied.

To make the filtered image cover the entire viewport using an SVG `filter`, I have to explicitly set the `filter` area to the input image size:

```
<filter id='f' x='0%' y='0%' width='100%' height='100%'><!-- primitives --></filter>
```

Which is odd, considering the grain effect is applied all across the viewport and not just to the rectangle in the middle that the input image is cropped to. Maybe the viewport is taken to be the default `120%` filter area and the `filter` input image is clipped to have `10%` on each side? Though that's definitely not how I's expect this to work.

Live test https://codepen.io/thebabydino/pen/EaxJmwJ

I've tested via Epiphany, but it's been confirmed on social media this happens in actual Safari as well.

[Radar WebKit Bug Importer]

<rdar://problem/149200203>

[Ana Tudor]

Changed title because I've hit this again in a different context and created another test case before it hit me I had already filed a bug.

New test case illustrating the problem better https://codepen.io/thebabydino/pen/xbGgwZx