Skip to content

Commit 03de62c

Browse files
committed
update pseudo-smooth-scrolling.md for clarity in section titles and descriptions
1 parent 6f05417 commit 03de62c

1 file changed

Lines changed: 2 additions & 2 deletions

File tree

src/content/docs/tips/pseudo-smooth-scrolling.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,12 +58,12 @@ So, it's not the scrollbar slider that smoothly moves from the lower to the uppe
5858

5959

6060

61-
## How to Avoid?
61+
## How to Avoid Pseudo-Smooth-Scrolling?
6262

6363
The pseudo-smooth-scrolling effect can be quite appealing if the pages are not too lengthy and you intend to use it deliberately. However, it might also occur unintentionally, especially if you specifically want to avoid smooth scrolling on your pages.
6464
There are two ways to avoid the effect.
6565

66-
### Just Animate the Root
66+
### Animate the Root Group of the Dcoument
6767
The pseudo-smooth-scrolling effect only occurs when the `view-transition-name` is applied to an HTML element other than the top-level `<html>` element. The View Transition API [treats the `:root` element differently](https://drafts.csswg.org/css-view-transitions-1/#capture-the-image). The old and new images of the document element are always constrained to the size of the viewport, meaning the default group animation doesn't transform the position and no scrolling happens at all.
6868

6969
If possible, resist the temptation to apply a view transition name to large content elements. Instead, use the `root` transition group on the document's documentElement to achieve the desired effect. If you fear that your root group now obscures header, footer, and navbar, you can always assign view transition names to those elements, allowing them to enter the view transition layer and [cover portions of the root images](/basics/pseudos/#rendering-pseudo-elements) as needed. Keep in mind that this technique is likely just a stopgap measure until nested view transition groups become more broadly supported.

0 commit comments

Comments
 (0)