search

WICG / view-transitions

https://drafts.csswg.org/css-view-transitions-1/
Other
808 stars 51 forks source link

is it possible to change the background colour behind transitions? #192

Closed gavJackson closed 2 years ago

gavJackson commented 2 years ago

I spent a work hackathon day experimenting with adding it to our app and was largely successful although I couldn't work out how to change the colour behind the transitions.

I have background-color and background gradients styles on the html, body and my low level DOM nodes but whatever I try I still get a white background behind the transitions. This isn't too bad on light skins, but we also have a dark mode and it looks pretty jarring then, is there something simple I am missing? or is this something else that needs adding to the spec? I even tried adding a background colour to the psuedo page transition elements. This image shows what I mean:

Screenshot 2022-09-13 at 08 59 22

p.s. I am blown away by this API, its very cool! a couple of years ago i tried implementing my own screenshot capturing transition system...not easy! I totally appreciate this, especially the DOM flattening.

jakearchibald commented 2 years ago

Glad you had fun with the API!

For the background colour, did you try:

::page-transition {
  background: black;
}
gavJackson commented 2 years ago

amazing thanks, that got it - much appreciated