Skip to content

Commit 080dd50

Browse files
committed
clarify recommendations for placing @view-transition opt-in in stylesheets
1 parent 325ac51 commit 080dd50

1 file changed

Lines changed: 2 additions & 2 deletions

File tree

src/content/docs/tips/view-transition-fails-and-fixes.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,15 +40,15 @@ or [opening an issue on GitHub!](https://github.com/vtbag/website/issues/new?tem
4040
Uncaught (in promise) AbortError: Transition was skipped
4141
```
4242

43-
It might seem best to place this rule together with your global view transition styles in a shared stylesheet and [include it on every page](/fwvt/enabling/#including-css-on-all-pages). This is fine if the opt-in to view transitions is at the start of the stylesheet.
43+
It might seem best to place this rule together with your global view transition styles in a shared stylesheet and [include it on every page](/fwvt/enabling/#including-css-on-all-pages). This seems to be fine if the @view-transition opt-in is at the start of the stylesheet. But I recommend to place it in an style element in the `<head>`, see next section.
4444

4545
#### Potential Pitfall: Unreliable Detection of the Opt-in
4646

4747
A particular pitfall occurs when the `@view-transition` at-rule is present but not reliably detected by the browser. This can happen in Chrome, for example, when the at-rule is placed in an external stylesheet after tons of other CSS.
4848

4949
According to the specification, the check for `@view-transition { navigation: auto }` happens together with the `pagereveal` event just before the first rendering. In theory, that means the browser should wait for render blocking resources such as external stylesheets linked in the `<head>`. However, Chrome may perform this check [without necessarily waiting for external CSS](https://issues.chromium.org/issues/383014860#comment9).
5050

51-
The safest approach is therefore to place the opt in for cross document view transitions early in the `<head>` inside an inline `<style>` element.
51+
The safest approach is therefore to place the opt-in for cross-document view transitions inside a `<style>` elementearly within the `<head>`.
5252

5353

5454

0 commit comments

Comments
 (0)