Bug 253427 – left and right arrows don't look right on hover on https://tickets.compagnie-oceane.fr

• Status: RESOLVED
• Resolution: FIXED
• Component: Animations

[Antoine Quint]

Steps to reproduce:

1. go to https://tickets.compagnie-oceane.fr
2. pick "Quiberon" under "Départ" and "Belle-Île (Le Palais) under "Arrivée"
3. hover over the left or right arrow to the sides of the month on the calendars that appear

The arrow jumps around gets clipped in Safari while it smoothly animates to a different color in Chrome and changes to a different color without animation but without jumping in Firefox.

[Antoine Quint]

Created attachment 465312 [details]
Reduction

Reduction shows it's an issue animating between two background-image values which are SVG images. This explains the difference in behavior between Chrome and Firefox since Chrome blends between images while Firefox does not (per spec).

[Antoine Quint]

I think the issue is that the value returned by SVGImage::containerSize() as we draw each of the images managed by the CrossfadeGeneratedImage is incorrect. I think we might need to reset these in the CrossfadeGeneratedImage constructor.

[Radar WebKit Bug Importer]

<rdar://problem/106633417>

[Ahmad Saleem]

Blink did something like this: https://chromium.googlesource.com/chromium/src.git/+/3ca78bf60493da8b2b7ad63f59bd169cb00a4947 & https://chromium.googlesource.com/chromium/src.git/+/ece900bafe8d6ff3346ed364a5d3fd13799b8620

Is it something similar to this bug?

[Ahmad Saleem]

This fixes it:

``` StyleCrossfadeImage.cpp

Function - StyleCrossfadeImage::image

Adding below:

RefPtr fromImageRef = fromImage;
    RefPtr toImageRef = toImage;
    
    if (fromImage->isSVGImage())
        fromImageRef = SVGImageForContainer::create(&downcast<SVGImage>(*fromImage), size, 1, URL());
    if (toImage->isSVGImage())
        toImageRef = SVGImageForContainer::create(&downcast<SVGImage>(*toImage), size, 1, URL());

    return CrossfadeGeneratedImage::create(*fromImageRef, *toImageRef, m_percentage, fixedSize(*renderer), size);

```

[Ahmad Saleem]

Pull request: https://github.com/WebKit/WebKit/pull/54493

[EWS]

Committed 303593@main (c4cfd9698b72): <https://commits.webkit.org/303593@main>

Reviewed commits have been landed. Closing PR #54493 and removing active labels.