Bug 253427 - left and right arrows don't look right on hover on https://tickets.compagnie-oceane.fr
Summary: left and right arrows don't look right on hover on https://tickets.compagnie-...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Animations (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL: https://tickets.compagnie-oceane.fr
Keywords: BrowserCompat, InRadar
Depends on:
Blocks:
 
Reported: 2023-03-06 00:45 PST by Antoine Quint
Modified: 2023-08-23 15:34 PDT (History)
5 users (show)

See Also:

Attachments
Reduction (538 bytes, text/html)
2023-03-06 00:47 PST, Antoine Quint 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
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>