1992806 - Zoom-dependent gaps in between tiles created with feTile

Status: NEW

(Core :: Disability Access APIs, defect)

Description

[Ana Tudor]

Attachment: chrome_vs_firefox.mp4

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:145.0) Gecko/20100101 Firefox/145.0

Steps to reproduce:

The idea: mix-blend-mode allows us to blend different elements, while background-blend-mode allows us to blend background layers, but we have no way of blending an element's content with the background of the same element without resorting to nesting elements in order to be able to use mix-blend-mode there.

SVG filters offer a way to do this in certain situations, following the following steps.

1. Let's say we have an img element. We give it a small top padding we compensate with a negative margin. That top padding space allows us to see through to a horizontal linear-gradient() set as the background of the img.

img {
	margin: calc(-1*var(--s));
	padding: var(--s);
	background: 
		linear-gradient(in hsl 90deg, #fb8500, #219ebc)
}

2. We give the img a filter which extracts a strip of height s from the top (basically our gradient strip) with pretty much any primitive that can preserve its input, then tiles it to cover the entire filter region (limited to the bounding box of the filter input here).

- let s = 8;

body(style=`--s: ${s}px`)
	svg(width='0' height='0' aria-hidden='true)
		filter#g(y='0' height='1')
			feBlend(height=s)
			feTile

svg[height='0'][aria-hidden='true'] { position: fixed }

img { filter: url(#g) }

(note that we have chosen the height s of the top strip to be > 4 pixels because otherwise the filter breaks in Safari)

Actual results:

All looks fine at first sight, but when zooming (and likely on hi-DPI displays too, but I can't test that), we see gaps in between the tiles in Firefox.

Introducing a feMorphology primitive to try to cover the gaps via vertical dilation either before or after feTile doesn't seem to help.

feMorphology(operator='dilate' radius=`0 ${.5*s}`)

(plus the whole point of vector graphics was supposed to be that we didn't have to worry about getting pixel resolution just right)

The gaps are then present when we blend with the filter input (and restrict the result to start a distance s from the top of the filter input, thus cutting out the top gradient strip).

feBlend(in='SourceGraphic' mode='luminosity' y=s)

Expected results:

The result of the feTile should have been a continuous left to right gradient across the entire height of the filter region, regardless of zoom level.

This is what happens in Chrome.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Disability Access APIs' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Ana Tudor]

The test demo https://codepen.io/thebabydino/pen/WbroEva

Comment 3

[Morgan Reschenberg [:morgan]]

Marking access-S3, but I'd rate this as borderline S2 since it seems like this issue could cause content to be unreadable or difficult to discern at high zoom levels.