Skip to content

Commit fb576a5

Browse files
committed
minor corrections and improvements regarding the user agent stylesheet
1 parent 12fca2d commit fb576a5

2 files changed

Lines changed: 10 additions & 10 deletions

File tree

src/content/docs/basics/styling.mdx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -213,8 +213,6 @@ The [API sets the defaults](/basics/styling/#group--morph-animation) to `0.25s`,
213213
Recently, all other animation properties but `animation-name` where added to the list.
214214

215215
```css
216-
::view-transition-group(*),
217-
::view-transition-group-children(*),
218216
::view-transition-image-pair(*),
219217
::view-transition-old(*),
220218
::view-transition-new(*) {
@@ -258,13 +256,8 @@ Of course styling view transition pseudo-elements is not limited to animations.
258256
position: absolute;
259257
top: 0;
260258
left: 0;
261-
}
262-
263-
::view-transition-group-children(*) {
264-
position: absolute;
265-
inset: 0px;
266-
border-style: solid;
267-
border-color: transparent;
259+
animation-duration: 0.25s;
260+
animation-fill-mode: both;
268261
}
269262

270263
::view-transition-image-pair(*) {
@@ -279,6 +272,13 @@ Of course styling view transition pseudo-elements is not limited to animations.
279272
inline-size: 100%;
280273
block-size: auto;
281274
}
275+
276+
::view-transition-group-children(*) {
277+
position: absolute;
278+
inset: 0px;
279+
border-style: solid;
280+
border-color: transparent;
281+
}
282282
```
283283

284284
## Selecting Pseudo-Elements…

src/content/docs/tips/over-exposure.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ This effect is most noticeable during a cross-fade involving the same image. \
7373

7474
This happens because, during the transition, both images become partially transparent. As a result, you can see part of the background through the old and new image. When cross-fading between two opaque images, you wouldn't expect the background to be visible, but that's exactly what happens with the default settings. A bright background will make the image appear brighter, a dark background will darken it, and in the example above, a yellow background shines through as… yellow.
7575

76-
## Set the Correct `mix-blend-mode`
76+
## Set the Correct mix-blend-mode
7777

7878
When the View Transition API adds its default fade animations to the pseudo-elements for the old and the new image, it also adds the `-ua-mix-blend-mode-plus-lighter` animation, which is defined as:
7979

0 commit comments

Comments
 (0)