Bug 275061 – [css-animations] width and opacity animation results flashes as it repeats

• Status: NEW
• Component: Animations

[Antoine Quint]

Created attachment 471575 [details]
Test

The relatively simple attached test has the following animation:

@keyframes fill-and-fade { 
    from { width: 50px; opacity: 1; }
    to   { width: 100px; opacity: 0; }
}

When this animation is repeated, there is what looks like a single frame where we're using the last frame of one iteration for width and the first frame of the iteration for opacity, resulting in a flash. This does not reproduce in Firefox and Chrome.

[Antoine Quint]

rdar://129103897

[Antoine Quint]

I don't think this is a new issue but rather more evidence of synchronization woes between animations performed purely in software (the `width` property) and delegated to Core Animation (the `opacity` property).