You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
fix(ContentToc): hold the highlight indicator still on its far edge - #7409
📖 Documentation (updates to the documentation or readme)
🐞 Bug fix (a non-breaking change that fixes an issue)
👌 Enhancement (improving an existing functionality)
✨ New feature (a non-breaking change that adds functionality)
🧹 Chore (updates to the build process or auxiliary tools and libraries)
⚠️ Breaking change (fix or feature that would cause existing functionality to change)
📚 Description
The indicator animated translate and height together. translate is composited and height is not, so their progress diverged while the page scrolled, and the edge that should stay put wobbled. It now moves with top and height, both layout properties computed in the same frame, so an edge whose value did not change cannot move. This covers straight and circuit.
`translate` is composited while `height` is not, so the two animate at
different rates while the page scrolls and the edge that should stay put
wobbles. `top` is a layout property like `height`, so both are computed in
the same frame and the unchanged edge cannot move.
No actionable comments were generated in the recent review.
Walkthrough
The straight and circuit highlight indicators now use the position custom property for their top value and transition top instead of translate. Their height animation remains unchanged.
This is a small styling change to the ContentToc highlight indicator, so its far edge stays still while scrolling. No merge-blocking risk was found.
Pre-merge checks: 4
Check name
Status
Explanation
Title check
The title names the ContentToc highlight indicator and the fix, which is to keep the far edge still. The change moves the straight and circuit indicators from translate to top and animates top instead…
Description check
The description states the bug (translate and height diverge while scrolling, so the unchanged edge wobbles), explains the fix (use top and height), names the affected variants (straight and circuit),…
Linked Issues check
[#7408] The issue requires that the indicator edge whose value does not change stays still during a scrollspy change. The cause is that the theme animates translate (composited) and height (not co…
Out of Scope Changes check
The reviewed change is a two-line edit (+2/-2) in src/theme/content/content-toc.ts. It replaces translate-y-(--indicator-position) with top-(--indicator-position) and translate with top in t…
Full details: Title check
Explanation
The title names the ContentToc highlight indicator and the fix, which is to keep the far edge still. The change moves the straight and circuit indicators from translate to top and animates top instead of translate, so the title describes the main change and its purpose.
Full details: Description check
Explanation
The description states the bug (translate and height diverge while scrolling, so the unchanged edge wobbles), explains the fix (use top and height), names the affected variants (straight and circuit), and links issue #7408. It matches the changeset.
Full details: Linked Issues check
Explanation
[#7408] The issue requires that the indicator edge whose value does not change stays still during a scrollspy change. The cause is that the theme animates translate (composited) and height (not composited) together, so the two values advance at different rates. The PR changes the straight and circuit indicators in src/theme/content/content-toc.ts to position with top-(--indicator-position) and to animate top instead of translate-y. The height animation is unchanged. top and height are both layout properties, so the browser computes them in the same frame. When one edge's value does not change, that edge does not move. The PR covers both variants named in the issue. The ignored snapshot file test/components/content/__snapshots__/ContentToc.spec.ts.snap was excluded from review, so any snapshot update cannot be checked. This does not affect the coding change itself. No automated behaviour test for the animation is visible in the reviewed evidence. The conclusion rests on the CSS change and on the layout-property reasoning, not on a runtime check.
Full details: Out of Scope Changes check
Explanation
The reviewed change is a two-line edit (+2/-2) in src/theme/content/content-toc.ts. It replaces translate-y-(--indicator-position) with top-(--indicator-position) and translate with top in the transition for the straight and circuit variants. Every changed line serves the objective of issue #7408. No unrelated files or behaviour changes appear in the summary. The excluded snapshot file is not reviewed, so its content is not assessed.
Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
Reviewing files that changed from the base of the PR and between 3879d26 and 46bcbd4.
Files ignored due to path filters: 1
test/components/content/__snapshots__/ContentToc.spec.ts.snap is excluded by !**/*.snap
Files selected for processing: 1
src/theme/content/content-toc.ts
Included review availability: This review used your included allowance. Your plan provides up to 8 included reviews per hour; 7 remain after this review.
Merging this PR will degrade performance by 33.98%
1 warning
⚠️1 benchmark with a significant change ran on different hardware
Its base and head results were measured on machines with a different CPU, core count or memory, so the change might not come from the code. Run base and head on the same runner type.
The regressed benchmark is table (~13 slots), which builds the table theme, and this PR only changes content-toc classes. The report also flags that base and head ran on different hardware.
I re-ran test/bench/tv.bench.ts alternating branches on one machine: 44,480 and 45,316 hz on v4, 44,603 and 44,507 on this branch, rme around 0.1%. Two runs of the same branch spread as much as the branches do.
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
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.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
🔗 Linked issue
ContentTochighlight indicator wobbles on its far edge while the page scrolls #7408❓ Type of change
📚 Description
The indicator animated
translateandheighttogether.translateis composited andheightis not, so their progress diverged while the page scrolled, and the edge that should stay put wobbled. It now moves withtopandheight, both layout properties computed in the same frame, so an edge whose value did not change cannot move. This coversstraightandcircuit.Kapture.2026-11-14.at.02.27.03.mp4
Kapture.2026-11-14.at.02.28.21.mp4
📝 Checklist