Branch: refs/heads/main
Home: https://github.com/WebKit/WebKit
Commit: 36150a6e113939ba18b3f6039b4cdc9e4d0728f8
https://github.com/WebKit/WebKit/commit/36150a6e113939ba18b3f6039b4cdc9e4d0728f8
Author: Sammy Gill <[email protected]>
Date: 2025-11-14 (Fri, 14 Nov 2025)
Changed paths:
A
LayoutTests/imported/w3c/web-platform-tests/css/css-pseudo/after-with-animation-removed-expected.html
A
LayoutTests/imported/w3c/web-platform-tests/css/css-pseudo/after-with-animation-removed.html
M Source/WebCore/rendering/updating/RenderTreeUpdaterGeneratedContent.cpp
Log Message:
-----------
GitHub.com: Brief flash of gradient content when loading certain pages.
https://bugs.webkit.org/show_bug.cgi?id=302367
rdar://133846547
Reviewed by Antoine Quint and Antti Koivisto.
On GitHub.com, if you navigate to certain pages, such as loading the
commits for a repository, there will be a brief flash of gradient
content as the page loads. Specifically, this content is a CSS gradient
that is on an after pseudo element. Due to some DOM/style mutations,
this pseudo content ends up getting resized and repositioned before its
parent ends up getting removed from the DOM, which is what causes the
flash.
What occurs on the commits pages is the following:
1.) The initial content loads, and the gradients appear in the correct
location. They appear on each row and are animated as the content is
loading.
2.) The style tag which holds all of the rules for much of the content
on the page, including the after pseudo elements, is removed from the
DOM via Element.removeChild().
3.) We perform layout after this and end up computing the position and
sizes of the pseudo content, and it moves from appearing small in each
row to becoming much bigger and on the side of the screen.
4.) The host of the pseudo element is removed from the DOM, and the page
basically reaches its final state with all the content loaded.
The bug is that during 3, we still see the pseudo content during layout
when rules targeting this content were removed in 2. This seems to be
because inside
RenderTreeUpdater::GeneratedContent::updateBeforeOrAfterPseudoElement,
we end up thinking that we need to keep around the renderer for the
pseudo element for an animation because we still have a keyframe effect
stack for the pseudo element. However, 2 removed the rule targeting the
pseudo element, which also included associated animation.
To address this, we can attempt to detect this case in
RenderTreeBuilder::GeneratedContent::updateBeforeOrAfterPseudoElement
by checking to see if we do not have a RenderStyle associated with the
pseudo content. If that happens then we try to cancel any animations
that came from style for that pseudo element since it no longer exists.
Note that we cannot just completely rely on needsPseudoElement to
determine if we need to cancel animations because we may need to keep
one around to animate display: none.
*
LayoutTests/imported/w3c/web-platform-tests/css/css-pseudo/after-with-animation-removed-expected.html:
Added.
*
LayoutTests/imported/w3c/web-platform-tests/css/css-pseudo/after-with-animation-removed.html:
Added.
* Source/WebCore/rendering/updating/RenderTreeUpdaterGeneratedContent.cpp:
(WebCore::RenderTreeUpdater::GeneratedContent::updateBeforeOrAfterPseudoElement):
* Source/WebCore/style/StyleTreeResolver.cpp:
(WebCore::Style::TreeResolver::resolvePseudoElement):
Canonical link: https://commits.webkit.org/303042@main
To unsubscribe from these emails, change your notification settings at
https://github.com/WebKit/WebKit/settings/notifications
