[csswg-drafts] [css-view-transitions-1] Properties set on `:root` that inherit and that affect inline-level content, are affecting the new and old VT pseudos (#13437)

bramus has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-view-transitions-1] Properties set on `:root` that inherit and that affect inline-level content, are affecting the new and old VT pseudos ==
In https://front-end.social/@chriscoyier/115984666612580637 the author reported that there is something weird going on with their View Transitions, as demonstrated in this video:

https://github.com/user-attachments/assets/a58aed1a-9749-4138-9294-1032cf7a9996

This behavior can be narrowed down to the presence of `text-align: center` on `:root`, and the glitch occurs in all three engines that have shipped View Transitions. Stripped down repro: https://codepen.io/bramus/pen/XJKYmRj/b191a3b108fa0c453d80d3253a4135dd

The culprit here is the following style rule:

```css
html {
  text-align: center;
}
```

While the `::view-transition`, `::view-transition-group()` and `::view-transition-image-pair()` pseudos are all `display: block`, the `::view-transition-old()` and `::view-transition-new()` pseudos are not, so they are affected by `text-align: center`.

That declaration affecting the View Transition is clearly not what the author intended and I would assume that this problem will become more prominent with the introduction of Element-Scoped View Transitions, as it’s more likely that people will apply a `text-align: center` on content in some div somewhere versus the entire `:root`.

---

Turning towards potential solutions, I can think of two:

1. Add `text-align: initial` onto `::view-transition` in the UA Style Sheet. If so, do we need to include other properties that affect “inline-level content”?
2. Set `::view-transition-old()` and `::view-transition-new()` to be `display: block` in the UA Style Sheet. If so, would we break existing pages?

My preference would be 2 here, as that tackles all properties that could potentially affect this

/cc @vmpstr @emilio @nt1m @jakearchibald 

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13437 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 3 February 2026 15:10:45 UTC