Bug 253427

Summary: left and right arrows don't look right on hover on https://tickets.compagnie-oceane.fr
Product: WebKit Reporter: Antoine Quint <graouts>
Component: AnimationsAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: ahmad.saleem792, dino, graouts, karlcow, webkit-bug-importer
Priority: P2 Keywords: BrowserCompat, InRadar
Version: WebKit Nightly Build   
Hardware: Unspecified   
OS: Unspecified   
URL: https://tickets.compagnie-oceane.fr
Attachments:
Description Flags
Reduction none

Description Antoine Quint 2023-03-06 00:45:42 PST 
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.
Comment 1 Antoine Quint 2023-03-06 00:47:06 PST 
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).
Comment 2 Antoine Quint 2023-03-07 08:20:25 PST 
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.
Comment 3 Radar WebKit Bug Importer 2023-03-13 01:46:14 PDT 
<rdar://problem/106633417>