Repository navigation
Animate the arrival bar with transform instead of inline-size - #154
Merged
Merged
Conversation
github-actions
Bot
added
the
[Area] Global Styles
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
MaggieCabrera
approved these changes
Oct 20, 2026
MaggieCabrera
left a comment
MaggieCabrera
left a comment
Contributor
There was a problem hiding this comment.
Thanks for the fix!
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The arrival bar on single posts animates
inline-size, which can't run on the compositor, so every frame of the sweep does style, layout, and paint on the main thread while the page is loading. Animatingtransform: scaleX()lets the compositor handle it, and the main thread no longer does layout or paint for it. RTL keeps the sweep direction withtransform-origin: right.Chrome's Performance panel shows it on the
ipsum-arrivalanimation:Compositing failed: Unsupported CSS property: widthThe bar looks the same, and it still only runs when
prefers-reduced-motionallows it.Testing Instructions
ipsum-arrivalin the Animations track - trunk shows "Compositing failed: Unsupported CSS property: width", this PR shows none.Use of AI Tools
AI assistance: Yes
Tool(s): Claude Code
Model(s): Opus 5.5
Used for: Finding the issue, measuring the options, and the patch. Tightly guided, directed, and reviewed.