1917481 - feTile sometimes fails to paint on translation animation

Status: NEW

(Core :: SVG, defect)

Description

[Ana Tudor]

Attachment: Recording the demo showing the text of the element with the SVG filter not always being painted on ontering viewport

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

Steps to reproduce:

1. Create a list of items structure for a marquee, a banner that's going to be moving inside a fixed wrapper.

<section class='wrap'>
  <div class='banner'>
    <div class='item'>User-Friendly Navigation</div>
    <div class='item'>Responsive Design</div>
    <!-- more such items -->
  </div>

2. Make the .banner text flow horizontally without any wrapping:

.banner {
  display: flex;
  width: max-content
}

3. Replicate the banner text on both sides with a simple SVG filter using feTile:

<svg width='0' height='0' aria-hidden='true'>
  <filter id='f' primitiveUnits='objectBoundingBox' x='-100%' width='300%'>
    <feTile x='0' width='1'/>
    <feTile/>
  </filter>
</svg>

.banner { filter: url(#f) }

4. Animate this banner:

.banner { animation: a 15s linear infinite }

@keyframes a { 0% { translate: -100% } }

Actual results:

During the animation, the text doesn't always get painted as it enters the viewport, particularly on resizing the viewport, but sometimes even without doing that. On selecting the invisible part, the text entering the viewport gets painted, but only for a while.

This happens in both stable and Nightly.

This seems to happen when one of the end keyframes is at -100%, that is, animating between 0% and -100%, regardless of the direction. It doesn't seem to happen when animating between 0% and 100%, regardless of the direction.

Live demo with multiple versions of end keyframes + animation-direction https://codepen.io/thebabydino/pen/LYKqGxM

Expected results:

The text should always get painted when entering the viewport, regardless of whether it animates within the [-100%, 0%] interval or within the [0%, 100%] interval. This is what happens in Chrome (Safari has other unrelated problems with tiling https://bugs.webkit.org/show_bug.cgi?id=266295 that are being worked on).

Comment 1

[BugBot [:suhaib / :marco]]

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

[BugBot [:suhaib / :marco]]

The severity field is not set for this bug.
:dshin, could you have a look please?

For more information, please visit BugBot documentation.