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.
<rdar://problem/102064448>
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.
Might be caused by bug 236019.
I wonder if this has anything to do with use of RenderStyle::hasTransform() which does not check for individual transform properties.
Or probably to do with KeyframeEffect::computeExtentOfTransformAnimation() not accounting for individual transform properties :(
Created attachment 464574 [details] Test
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.
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.
Pull request: https://github.com/WebKit/WebKit/pull/8879
Committed 259173@main (f55528510521): <https://commits.webkit.org/259173@main> Reviewed commits have been landed. Closing PR #8879 and removing active labels.