Bug 247299

Summary:

Incorrect paint of 'translate' property animation

Product:

WebKit

Reporter:

Andrew Shcherbyna <octrace>

Component:

Animations

Assignee:

Antoine Quint <graouts>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

dino, graouts, graouts, simon.fraser, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

Safari 16

Hardware:

Mac (Intel)

OS:

macOS 13

See Also:

https://bugs.webkit.org/show_bug.cgi?id=236019

Bug Depends on:

Bug Blocks:

250901

Attachments:

Description	Flags
Bug recorded	none
Test	none

Description Andrew Shcherbyna 2022-10-31 17:14:06 PDT

Created attachment 463331 [details]
Bug recorded

Visit this sandbox in Safari: https://codesandbox.io/s/new-firefly-lb1s2e?file=/src/index.js

Open it in the new tab (by some reason bug doesn't appear in the sandbox preview)

Click "Animate" button.

As I understand, overlapping of the element without translation with the element with first keyframe applied get's erased. For example if you'll specify '0px' as the first keyframe - animation will work correctly. If it will be '10px' - first 10px of the original element will be still shown during the animation.

Setting element's transform property to any valid value fixes this behaviour.

Comment 1 Radar WebKit Bug Importer 2022-11-07 16:15:20 PST

<rdar://problem/102064448>

Comment 2 Simon Fraser (smfr) 2022-11-15 13:56:47 PST

Looks like the repaint we issue when the animation starts (after the element has popped into a composting layer) uses a rectangle which is affected by the running animation.

Comment 3 Antoine Quint 2022-11-16 00:59:59 PST

Might be caused by bug 236019.

Comment 4 Antoine Quint 2023-01-18 08:52:36 PST

I wonder if this has anything to do with use of RenderStyle::hasTransform() which does not check for individual transform properties.

Comment 5 Antoine Quint 2023-01-20 01:59:28 PST

Or probably to do with KeyframeEffect::computeExtentOfTransformAnimation() not accounting for individual transform properties :(

Comment 6 Antoine Quint 2023-01-20 03:32:00 PST

Created attachment 464574 [details]
Test

Comment 7 Antoine Quint 2023-01-20 03:58:09 PST

Making computeExtentOfTransformAnimation() run for "translate" and returning some large bounds for debugging purposes doesn't alter behavior here. I suppose this shouldn't be surprising as I believe that method is about computing layer overlap for compositing purposes while animations run.

Comment 8 Antoine Quint 2023-01-20 05:57:57 PST

One possible issue is that Styleable::isRunningAcceleratedTransformAnimation() only checks for "transform" animations. I'm not sure if this will fix the problem but that at least is definitely wrong.

Comment 9 Antoine Quint 2023-01-20 08:19:45 PST

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

Comment 10 EWS 2023-01-21 14:01:37 PST

Committed 259173@main (f55528510521): <https://commits.webkit.org/259173@main>

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