Nic Chan

View transitions and stacking context: Why does my CSS View Transition ignore z-index?

https://www.nicchan.me/blog/view-transitions-and-stacking-context/

Paint order, the order in which your elements are painted, cannot be easily calculated without applying a complex algorithm, especially since many uses of View Transitions involve transitioning between pages. There isn't really a way to figure out the shared stacking context between two pages, because if we had to consider the z-index of every page simultaneously to account for every possible transition, our heads/computers might explode.

• Older: The Web Is For User Agency
• Newer: StaticShape — Migrate to an SSG at scale

Related contents with similar topics

1. 

   Jake Archibald

   View transitions: Handling aspect ratio changes

   • Nicolas Hoizey
   • 26 March 2024
   • View Transitions, CSS, animation
   • 8 reactions

   When folks ask me for help with view transition animations that "don't quite look right", it's usually because the content changes aspect ratio. Here's…

2. 

   Tyler Gaw

   Complex MPA View Transitions

   • Nicolas Hoizey
   • 18 November 2023
   • View Transitions, CSS, animation
   • 4 reactions

   Worth mentioning again that this is just CSS with a touch of HTML. Also worth pointing out that very little of this is specific to CSS view transitions.…

3. HTML and CSS based View Transitions are coming

   • Nicolas Hoizey
   • 19 May 2023
   • CSS, View Transitions
   • 52 reactions

   While same-document View Transitions have now been available for a while in Chromium browsers for Single Page Applications (SPA), they were requiring the use of a JavaScript API. Chrome Canary now allows us to develop and test View Transitions with HTML and CSS only, obviously targeting Multiple Pages Applications (aka Web sites 🤷‍♂️).

4. 

   Chris Coyier

   Early Days Examples of View Transitions

   • Nicolas Hoizey
   • 19 May 2023
   • CSS, View Transitions
   • 3 reactions

   All of these are page transitions, like when you leave one page and go to another. As opposed to the document.startViewTransition kind, which are…

5. 

   Dave Rupert

   Getting started with View Transitions on multi-page apps

   • Nicolas Hoizey
   • 19 May 2023
   • CSS, View Transitions
   • 8 reactions

   View Transitions for MPAs are a feature that’s high on my CSS wishlist, so I got to it. It took less than an hour to do, requires zero JavaScript,…