IRC log of pagetransitions on 2022-09-14

Timestamps are in UTC.

14:07:25 [RRSAgent]
RRSAgent has joined #pagetransitions
14:07:25 [RRSAgent]
logging to https://www.w3.org/2022/09/14-pagetransitions-irc
14:07:27 [Zakim]
Zakim has joined #pagetransitions
14:12:16 [dom]
Meeting: Page transitions in the browser (Shared Element Transitions) - TPAC 2022 breakout
14:12:18 [dom]
Chair: Jake_Archibald
14:12:20 [dom]
Agenda: https://www.w3.org/events/meetings/68a3ec0e-715b-4415-ac23-0d41fa569ea8#agenda
14:12:22 [dom]
RRSAgent, make log public
14:12:24 [dom]
RRSAgent, this meeting spans midnight
14:18:00 [dom]
RRSAgent, stay
14:18:02 [dom]
Zakim, stay
14:18:02 [Zakim]
I don't understand 'stay', dom
15:14:58 [dom]
dom has joined #pagetransitions
16:12:51 [dom]
agenda+ breakout
17:59:37 [dholbert]
dholbert has joined #pagetransitions
18:15:49 [dom]
dom has joined #pagetransitions
20:15:05 [dom]
dom has joined #pagetransitions
20:30:10 [dom]
dom has joined #pagetransitions
21:01:01 [JakeA]
JakeA has joined #pagetransitions
21:07:02 [dom__]
dom__ has joined #pagetransitions
21:52:59 [dom]
dom has joined #pagetransitions
21:57:51 [wendyreid]
wendyreid has joined #pagetransitions
21:57:56 [wendyreid]
present+
21:58:59 [astearns]
astearns has joined #pagetransitions
22:00:18 [khush_]
khush_ has joined #pagetransitions
22:00:26 [fantasai]
fantasai has joined #pagetransitions
22:00:35 [fantasai]
ScribeNick: fantasai
22:00:48 [fantasai]
Agenda: https://www.w3.org/2022/09/TPAC/breakouts.html#pagetransitions
22:00:50 [sflaming]
sflaming has joined #pagetransitions
22:01:00 [fantasai]
Topic: Page Transitions
22:01:33 [fantasai]
-> https://drafts.csswg.org/css-shared-element-transitions-1/
22:01:55 [ydaniv_]
ydaniv_ has joined #pagetransitions
22:02:12 [khush__]
khush__ has joined #pagetransitions
22:02:19 [smaug]
smaug has joined #pagetransitions
22:03:13 [fantasai]
s/Page Transitions/Shared Element Transitions/
22:03:24 [fantasai]
JakeA: I have slides and words, but if anyone wants to ask a question at any point, please do
22:03:59 [dholbert]
present+
22:04:13 [khush__]
present+
22:04:34 [emilio]
emilio has joined #pagetransitions
22:05:09 [fantasai]
[dicussion of sending slides to www-archive]
22:05:20 [fantasai]
JakeA: Trying to convince Chrome to implement for years, and now we are, so I'm really excited!
22:05:28 [fantasai]
... Here's some demos
22:05:37 [fantasai]
... This kind of thing isn't just fancy visual, it helps the navigation
22:05:47 [fantasai]
... gives a sense of whether going backwards or forward, whether something is adjacent or something
22:05:53 [fantasai]
... gives a sense of motion
22:06:54 [fantasai]
... whereas on the Web, navigation is just a click and a change
22:06:59 [fantasai]
... maybe with an exciting flash of white
22:07:08 [fantasai]
... but for a long time couldn't have nice things on the Web
22:07:22 [fantasai]
JakeA: One reason why page transition is hard, because involves old thing and new thing both on the screen at the same time
22:07:26 [fantasai]
... no opportunity for them to work together
22:07:33 [fantasai]
... but that's only true for tranditional web application
22:07:47 [fantasai]
JakeA: Single-page apps can have both states on at the same time
22:07:53 [fantasai]
... but even there we don't see very many cool transitions
22:07:57 [fantasai]
... because it's very difficult
22:08:08 [fantasai]
... Consider a cross-fade: there's a time where both states are in the apge at the same time
22:08:11 [fantasai]
... hard to do with frameworks
22:08:38 [fantasai]
... if doing manually, lots of accessibility pitfalls, scroll position sync problems, if contains an iframe how to handle duplicate DOM elements...
22:08:44 [fantasai]
... It's not impossible, but really difficult
22:09:00 [fantasai]
JakeA: Another case, I want this box to go from one container to another, difficult because of overflow:hidden
22:09:12 [fantasai]
... end up having to take element into child of root, and have to change how you write your styles
22:09:16 [fantasai]
... really not easy
22:09:25 [fantasai]
JakeA: Meanwhile Android/iOS there are dedicated APIs
22:09:31 [fantasai]
... We think that's not fair, want to do this stuff, too.
22:09:43 [fantasai]
JakeA: We're not even the first to try
22:09:51 [fantasai]
... there was a proposal from 2015 from Chrome, another from Mozilla
22:09:59 [fantasai]
... TabAtkins in 2018
22:10:07 [fantasai]
... Tried using <portal>
22:10:13 [fantasai]
... And here we are in 2022!
22:10:47 [fantasai]
... Most exciting bit of history is Internet Exporer in 199?, where you could have page transitions (see http-equiv codes)
22:10:52 [fantasai]
... We wanted to do better than that
22:11:01 [fantasai]
JakeA: Consider this basic site, I'll show you what new API can do
22:11:15 [fantasai]
... this is a single page web app, that's what Canary supports right now, but should expand to multipage
22:11:26 [lgombos____]
lgombos____ has joined #pagetransitions
22:11:41 [fantasai]
... people are more excited about cross-document navigation, but will work on that next
22:11:48 [fantasai]
JakeA: This is an example of how navigation is handled in SPA world
22:11:54 [fantasai]
...you catch some data, use that data to update the state
22:11:59 [fantasai]
... With new API we'll add a transition to that
22:12:12 [fantasai]
... document.createTransition to create the transition if not there yet
22:12:16 [fantasai]
... and then apply the DOM change
22:12:22 [fantasai]
... and it gives us a nice cross-fade between the pages
22:12:26 [fantasai]
... Not super interesting but it is the default
22:12:31 [fantasai]
... We let devs customize this
22:12:44 [fantasai]
JakeA: When we call page transition, browser takes a screenshot
22:12:53 [fantasai]
... so we can change DOM underneath without calling flash of unstyled content
22:12:59 [fantasai]
... and then creates image of incomig tree
22:13:04 [fantasai]
... and it creates a tree of elements
22:13:10 [fantasai]
<transition-container>
22:13:12 [fantasai]
<iage-wrapper>
22:13:16 [fantasai]
<outgoing-image/>
22:13:20 [fantasai]
<incoming-image/>
22:13:23 [fantasai]
</>
22:13:24 [fantasai]
</>
22:13:27 [fantasai]
s/iage/image/
22:13:41 [fantasai]
JakeA: This pseudo-element structure is sitting over the top of everything
22:13:55 [fantasai]
... outgoing image fades from opacity 1 to 0, incoming the opposite, and that gives you the cross-fade
22:14:01 [fantasai]
... and when this is done, reveals new DOM underneath
22:14:09 [fantasai]
... THis is built of platform primitives so you can play around with them
22:14:16 [fantasai]
... came up with some pseudo-elements to represent these
22:14:19 [fantasai]
... can bikeshed later
22:14:33 [fantasai]
JakeA: We could do things like, what if instead of cross-fade we want something different
22:14:37 [fantasai]
... this is all built on top of animations
22:14:45 [fantasai]
... change animation-duration to 5s and now it's slower!
22:14:54 [fantasai]
... gives us the opportunity also to change the animation completely
22:15:02 [fantasai]
... Here's one that slides to the left, and another slides from the right
22:15:06 [fantasai]
... keyframes for each
22:15:15 [fantasai]
... and now for the outgoing image we apply slide-to-left
22:15:21 [fantasai]
... and incoming image slide-to-right
22:15:30 [fantasai]
... and now you see something more like a smoother thing from a native app
22:15:38 [fantasai]
... (promise much smoother on my comp than on Zoom)
22:15:50 [fantasai]
JakeA: This is somewhat not ideal if going back,
22:15:57 [fantasai]
... might want differnet keyframes depending on direction
22:16:09 [fantasai]
... The other thing that's odd is the head sliding in and out, it's a consistent part of both these states
22:16:19 [fantasai]
s/... The other/JakeA: The/
22:16:22 [fantasai]
... we can handle that
22:16:29 [fantasai]
... have page-transition-tag: site-header;
22:16:32 [fantasai]
... containe: layout
22:16:42 [fantasai]
... This changes how the page is captured. Now we're capturing in two parts
22:16:46 [fantasai]
... header part and the rest
22:17:02 [fantasai]
JakeA: So now just like we had this structure for root of page, we have one for this specific part
22:17:06 [fantasai]
... can give it specific calls
22:17:11 [fantasai]
... and can animate them independently
22:17:19 [fantasai]
... but the default, without adding anything addition
22:17:27 [fantasai]
... slide and cross-fade
22:17:33 [fantasai]
astearns: what happens if not appropriate contain?
22:17:39 [fantasai]
JakeA: Right now, we won't perform the transition
22:17:45 [fantasai]
... we'll still call the callback for you to make the DOM change
22:17:51 [fantasai]
... Designed the API so that the transition is purely an enhancement
22:17:58 [fantasai]
... so if hit case where can't do a transition, still do the DOM change
22:18:06 [fantasai]
... Also the same if you tag two elements with the same page transition case
22:18:11 [fantasai]
... because supposed to be unique
22:18:48 [fantasai]
fantasai: If I tag a piece, does it get screenshotted into the main page and therefore get drawn twice?
22:18:55 [fantasai]
JakeA: It's pulled out into a separate layer, not there in the root
22:19:05 [fantasai]
... so the thing we animated before, it no longer contains the header
22:19:34 [Aoyuan]
Aoyuan has joined #pagetransitions
22:19:44 [fantasai]
fantasai: If tag two elements, does it fail as if not tagged, or fail the whole transition?
22:19:52 [fantasai]
JakeA: fail the whole transition, only get the DOM change
22:19:55 [dholbert]
q+
22:20:03 [fantasai]
khush__: This was one open question we discussed, 2 parts for script API contract, one that animation will happen
22:20:11 [fantasai]
... and then callback to browser that you want to update DOM
22:20:18 [fantasai]
... until your callback running, we don't update the page so can see the old DOM
22:20:26 [fantasai]
... whether makes sense to do the same rendering/freezing part
22:20:36 [fantasai]
... we don't do the generation of the pseudo-elements
22:20:57 [astearns]
I think it might be better to find a way to allow ident duplication somehow.
22:21:17 [fantasai]
fantasai: I'm wondering if you want to allow duplicate names, and just index them to disambiguate
22:21:31 [fantasai]
... e.g. might have a bunch of elements all the same type, and want them to transition
22:21:35 [fantasai]
JakeA: Thought about that, but
22:21:42 [fantasai]
... suppose you had chat messages and transitioning
22:21:56 [fantasai]
... in that case you want to anchor to the last message
22:22:03 [fantasai]
... then need to match them in reverse order
22:22:08 [fantasai]
... so that's tricky
22:22:15 [fantasai]
... maybe could just index in reverse
22:22:20 [astearns]
ack dholbert
22:22:24 [fantasai]
dholbert: Question about paint ordering
22:22:34 [fantasai]
... your two simple examples, one with cross-fade and one with a slide animation
22:22:43 [fantasai]
... it sounded from description that the actual painted content isunderneath those layers
22:22:49 [fantasai]
... what would happen if you got the slide animation too long
22:23:00 [fantasai]
... if delayed the slide in, would you see a bit of the new DOM underneath?
22:23:04 [fremy]
fremy has joined #pagetransitions
22:23:12 [fremy]
q+
22:23:15 [fantasai]
... similar for cross-fade, at 50% would you see partially-transparent underneath?
22:23:27 [fantasai]
JakeA: We solved cross-fade case by new blend mode
22:23:32 [fantasai]
... that handles the 50% case
22:23:37 [fantasai]
... for other case, we don't draw the DOM underneath
22:23:45 [fantasai]
khush__: If tagged as shared element, it is not painted in the actual DOM
22:23:55 [fantasai]
... idea that this content is being displayed through pseudo-snapshot instead
22:24:04 [fantasai]
... during the transition, it effectively has 'visibility:hidden'.
22:24:10 [fantasai]
... it won't hit-test, or paint in actual DOM
22:24:14 [fantasai]
JakeA: This is transition we've got so far
22:24:20 [fantasai]
... header which cross-fades, and root which slides
22:24:26 [dholbert]
q-
22:24:33 [fantasai]
... One thing that makes it even better, I can give a page transition to the bit of text in the header
22:24:38 [fantasai]
... Split it out further
22:24:45 [fantasai]
... by adding a page-transition-tag to site-title
22:24:57 [fantasai]
... Result is that the page moves to the side to make space fo rthe back button
22:25:15 [fantasai]
... So take from the old postioin to new position
22:25:36 [fantasai]
... see the text slide across since in different position from before state to after state
22:25:52 [fantasai]
fremy: Would love to see this in slow motion
22:26:05 [fantasai]
s/fremy/Simon/
22:26:11 [fantasai]
s/Simon/smfr/
22:26:15 [fantasai]
... so we can see what's moving where
22:26:49 [fantasai]
[demo]
22:28:13 [fantasai]
JakeA: In that case we've got three shared elements: title, header, and root
22:28:30 [fantasai]
... example of moving from one container to another, that isn't a problem because everything is a sibling of root
22:28:35 [fantasai]
s/of/inside/
22:28:46 [fantasai]
JakeA: Looking good, now let's look at desktop
22:28:54 [fantasai]
... it's more nauseating, but devs can solve this with media queries
22:28:58 [fantasai]
... and use a different set of keyframes
22:29:07 [fantasai]
... In this case we have slide to the side animation in mobile
22:29:17 [fantasai]
... whereas on desktop, does a much smaller fade-in using MQ
22:29:32 [fantasai]
JakeA: Here I'm skipping transition altogether if browser doesn't support API
22:29:37 [fantasai]
... can also skip if prefers-reduced-motion
22:29:55 [fantasai]
... or alternatively use a simpler animation if prefers-reduced motion
22:30:09 [fantasai]
JakeA: New example, going ot take that large video, and make it its own thing
22:30:16 [fantasai]
... This only exists on this page
22:30:26 [fantasai]
... doesn't exist on thumbnail page
22:30:39 [fantasai]
... Let's say this is JS for when thumbnail is clicked
22:30:52 [fantasai]
... I'll assign this a page-transition tag just for that SPA navigatio
22:31:00 [fantasai]
... when video is clicked, the thumbnail expanded into the video
22:31:10 [fantasai]
... so didn't matter that these are different elements in the DOM
22:31:17 [fantasai]
... using page-transition-tag, told the API to treat them as being the same thing
22:31:25 [fantasai]
... transition the position and size from before to after
22:31:30 [fantasai]
fremy: Good moment for my question
22:31:37 [fantasai]
... which is exactly related to videos and more interactive content
22:31:47 [fantasai]
... if I understand correctly, both initial and final state are static images?
22:31:58 [fantasai]
JakeA: outgoing stage is just a static screenshot
22:32:01 [fantasai]
... but incoming is live
22:32:07 [fantasai]
fremy: great, because was going to ask about that
22:32:17 [fantasai]
... it would only work for videos if they kept working as they transition
22:32:26 [fantasai]
JakeA: For that kind of transition, in your CSS you would hide the outgoing image
22:32:31 [fantasai]
... and show the incoming one straightaway
22:32:44 [fantasai]
smaug: what if incoming image, its contents are cross-origin iframe
22:32:49 [fantasai]
... how do you know you have something to paint?
22:33:05 [fantasai]
... [missed details]
22:33:13 [fantasai]
JakeA: when you call createTransition, that can be async
22:33:19 [fantasai]
... you can choose to hold back until things load
22:33:26 [fantasai]
smaug: so iframe would still run animationFrame callbacks
22:33:28 [fantasai]
JakeA: yes
22:33:38 [fantasai]
smaug: because currently [missed]
22:34:00 [fantasai]
khush__: Question is that when doing transition,embedding an iframe, during term when RAF callbacks are suppressed [missed again]
22:34:10 [fantasai]
smaug: ...
22:34:29 [fantasai]
khush__: Maybe this needs to be specced more clearly. we say rendering is suppressed for page that is transitioning, maybe say RAF is also suppressed
22:34:36 [fremy_]
fremy_ has joined #pagetransitions
22:34:39 [fremy_]
ack fremy
22:34:41 [fantasai]
JakeA: In the rendering steps of the event loop, when rendering is frozen, what does that exactly mean
22:34:57 [fantasai]
... rendering steps, do we just block "update view" or something else
22:35:05 [fantasai]
... my preference would be just that last line
22:35:29 [fantasai]
smfr: When you run, under author or UA control?
22:35:34 [fantasai]
JakeA: author calls createTransition
22:35:41 [fantasai]
... we then go and capture the state of the current page
22:35:44 [fantasai]
... that's UA control
22:35:56 [fantasai]
... we then call the updateDOM callback, which returns promise
22:36:01 [fantasai]
... that's under developer's control
22:36:15 [fantasai]
smfr: In your examples, the target page is always well-controled and static
22:36:23 [fantasai]
... but pages are dynamic, they load asynchronously, they run script, etc.
22:36:35 [fantasai]
... when you're animating pieces into final positions, how do you know that the new position hasn't changed under you?
22:36:48 [fantasai]
JakeA: if something is going to move in the page, we'll update the final position in our default generatd keyframes at the very least
22:36:56 [fantasai]
... still trying to figure if it should be more complicated than that or not
22:37:02 [fantasai]
... if only updating final keyframe, will cause a jump
22:37:23 [fantasai]
smfr: Other thing is page can scroll
22:37:39 [fantasai]
... destination position in document-relative coords or something positioN:fixed shoooting for a fixed location?
22:37:45 [fantasai]
JakeA: when we're capturing it's in viewport coords
22:37:50 [fantasai]
... think of element captured as psoition:fixed
22:37:57 [fantasai]
... if something scrolls underneath, treat as changing the final keyframe
22:38:03 [fantasai]
... if user tries to scroll, it's not going to land on the scrollbar
22:38:15 [fantasai]
... we'll capture that in the pseudo-element and prevent scrolling
22:38:19 [fantasai]
... but of course JS can do it
22:38:29 [fantasai]
... Could be more like CSS transitions, more dynamically changing the animations
22:38:38 [fantasai]
... Our advice to devs is to reduce layout shift during page load
22:38:55 [fantasai]
... I would worry about a case where dev had created, and we were hiding all their shifting
22:39:07 [fantasai]
... would look good, but people with prefers-reduced-motion would see lots of jumping
22:39:11 [fantasai]
smfr: thanks
22:39:46 [fantasai]
JakeA: There's a lot of freedom in the transitions you can make
22:39:53 [fantasai]
... all of these demos are running Chrome Canary behind a flag
22:39:59 [fantasai]
... have an origin trial for it, and some dev docs
22:40:08 [fantasai]
... and we have a spec, currently ED in the CSSWG
22:40:16 [fantasai]
... along with some to-dos
22:40:33 [fantasai]
JakeA: Next steps is feedback from vendors. This is when we want it!
22:40:51 [fantasai]
... aready some feedback from FF folks, some questions about our pseudo-element tree structure
22:41:11 [fantasai]
JakeA: this is our JS API, not perfect, but only a bikeshedding session away from good
22:41:20 [fantasai]
... a bit concern about use of Transition where we're using CSS Animations
22:41:25 [fantasai]
... so we've got some naming issues to solve
22:41:30 [fantasai]
... and some minor questions on when we need promises to resolve
22:41:45 [fantasai]
... We have a finish promise, what if doesn't play through before interrupted by another transition?
22:41:49 [fantasai]
... These are our questions now
22:42:07 [fantasai]
fantasai: What's next steps to multi-page transitions?
22:42:09 [fantasai]
JakeA: next slide!
22:42:19 [fantasai]
JakeA: We do capture of old state and new state, that model works
22:42:23 [fantasai]
... for both SPA and MPA
22:42:32 [fantasai]
... what we need is some bit of JS to provide an opt-in
22:42:38 [fantasai]
... so both pages are happy with this transition going ahead
22:42:48 [fantasai]
JakeA: this is a sample API,
22:42:54 [fantasai]
... would only allow for same-origin document swaps
22:43:04 [fantasai]
... maybe and a "pagehide" listener
22:43:14 [fantasai]
... other side have an event, preveious page wants to do a transition
22:43:16 [fantasai]
... opt into that
22:43:28 [fantasai]
... Unfortunately can't use pageshow, because for new documents that fires after load
22:43:32 [fantasai]
... so need some new events
22:43:37 [fantasai]
... and would want to fire this before first render
22:43:51 [fantasai]
... so would need inline JS to some degree, but we don't want to block rendering any longer than necessary
22:44:00 [fantasai]
fremy_: [missed question]
22:44:10 [fantasai]
JakeA: Need to know which to assing a page transition tag to
22:44:21 [fantasai]
... it means you can create different transitions between different page types
22:44:34 [fantasai]
fremy_: instead of that, maybe when you say "allow a transition", provide the list of stuff that you provide images for
22:44:37 [fantasai]
... and new page could read that list
22:44:40 [fantasai]
... get all the stuff
22:44:45 [fantasai]
JakeA: we have a GH issue open
22:44:52 [fantasai]
... for SPA also interesting to know what was actually captured
22:44:58 [fantasai]
... and maybe give easier access to auto-generated keyframes
22:45:09 [fantasai]
... e.g. want to use your own animations, but have our info from start and end positions
22:45:16 [fantasai]
fremy_: URL might not always be relevant
22:45:23 [fantasai]
... some hybrid pages are like SPA and sometimes new page
22:45:35 [fantasai]
JakeA: would also like to pass along a structured clonable, for abitrary data like "page type"
22:45:40 [fantasai]
fremy_: that's probably more useful than URL
22:45:46 [fantasai]
JakeA: we would give both, we have URL to give
22:45:50 [fantasai]
JakeA: this is same origin
22:45:55 [fantasai]
... discussed what we could do cross-origin
22:46:03 [fantasai]
... but if we do something cross-origin would be really locked down
22:46:08 [fantasai]
... maybe only root origin transition
22:46:08 [astearns]
(replying to dholbert's zoom question)
22:46:13 [fantasai]
... it's just such a massive leak
22:46:27 [fantasai]
... I don't think ppl will realize how much info they're leaking by giving size of the header
22:46:34 [fantasai]
khush__: another thing about Xoriign
22:46:42 [fantasai]
... accessing the pseudo-tree is not an option for cross-origin
22:47:10 [fantasai]
... security feedback is we don't want the pseudo-elements to be accessible to CSS or script to either of the origins
22:47:19 [fantasai]
... so that the duration of animation or what it looks like is completely UA-controlled
22:47:36 [fantasai]
smfr: Concerned about page that's on receiving end of a page transition
22:47:40 [fantasai]
... gains some info about where you cam efrom
22:47:45 [fantasai]
... if old page wants to transitions
22:47:52 [fantasai]
... maybe FB is the only age on the Web that does that
22:47:58 [fantasai]
... receiving page knows you came from there
22:48:05 [fantasai]
JakeA: we haven't thought too much about cross-origin case
22:48:11 [fantasai]
... and maybe conclusion is that it can't happen
22:48:18 [fantasai]
... focusing on same-origin right now
22:48:31 [fantasai]
yonatan: [missed question]
22:48:42 [fantasai]
JakeA: Yes. Hope is, demos I implemented with SPA, I want to make those MPAs
22:48:46 [fantasai]
... I'm more excited about that
22:48:52 [fantasai]
... with SPA, taking something that's very hard making iteasier
22:49:01 [fantasai]
... with MPA cases we're taking something impossible and making it possible
22:49:10 [fantasai]
fremy: wondering if meta tag is a good idea.
22:49:14 [fantasai]
... doesn't seem like JS is required
22:49:24 [fantasai]
... in a lot of cases, just saying "I accept page transitions from same-origin domains"
22:49:28 [fantasai]
... and do that declaratively
22:49:33 [fantasai]
<fantasai> +1
22:49:47 [fantasai]
fremy: Just a meta tag: allow same-origin transition
22:49:54 [fantasai]
... and in first block of bytes, browser is immediately aware
22:50:03 [fantasai]
JakeA: If transitions are simple enough that they work cross-page
22:50:17 [fantasai]
... if cases where you are capturing individual elements and doing something special, need JS
22:50:26 [fantasai]
fremy: Yes, if you need special code for special cases
22:50:30 [fantasai]
JakeA: I'm open to that
22:50:34 [fantasai]
... more we can move to declarative the better
22:50:41 [fantasai]
JakeA: right now to make back animations work is to look at navigation API
22:50:50 [fantasai]
... let's me know based on history indexes which is larger
22:50:56 [fantasai]
... for MPA we need something else, we need a media query or something
22:51:35 [fantasai]
fantasai: For back navigation, 2 ways to go back: back button in UA
22:51:48 [fantasai]
... but also website itself has ways of going functionally back while actually going forward i nhistory
22:51:54 [fantasai]
... would want to animate those the same in most cases
22:52:08 [fantasai]
JakeA: So in pages where they do a push navigation, but conceptually going back
22:52:16 [fantasai]
... are devs doing that because the current API sucks?
22:52:26 [fantasai]
khush__: It's just hitting a link in the page
22:52:32 [fantasai]
... could have hit back butotn and gotten to same URL
22:52:59 [fantasai]
fantasai: E.g. I have breadcrumb navigation, and going up, kinda want to feel going back maybe
22:53:07 [fantasai]
JakeA: kCould compare URLs
22:53:19 [fantasai]
fremy: or passing a parameter
22:53:27 [fantasai]
JakeA: could do with strutured ???
22:53:30 [fantasai]
fantasai: but declaratively
22:53:32 [fantasai]
JakeA: I see
22:54:47 [fremy]
fremy has joined #pagetransitions
22:54:50 [fremy]
q+
22:54:51 [fantasai]
fantasai: Would be nice to have comparison functions for URLs, if you have structured URLs can do some things without needing to run JS and or check URL maps
22:55:10 [fantasai]
... and also would be useful to be able to pass params, clicking these links is "back" clicking those links is "up", etc.
22:55:24 [fantasai]
yonatan: maybe using conditionals?
22:55:37 [fantasai]
fremy: I was thinking maybe we can use pseuod-class on the page transition element
22:55:47 [fantasai]
... e.g. ::page-transition-image-outgoing::forward/etc.
22:56:21 [fantasai]
fantasai: we have link attribute, rel="", might consider passing that info to the page transition in a way that allows to select against it
22:56:36 [fremy]
s/::forward/:forward/ since it's a pseudo-class
22:57:02 [fantasai]
fantasai: already have back/up etc. in rel, just pass it similar to how we can select against a class can select against rel
22:57:07 [fantasai]
... in the pseudo-elements
22:57:15 [fantasai]
JakeA: [lost stack]
22:57:32 [fantasai]
JakeA: Here's a case, where pasisng an element from one element to other, but the rest are clipped by parent
22:57:39 [fantasai]
[demo of passing an element from one scroll container to another]
22:57:53 [fantasai]
JakeA: one idea was to say that "I want this element to be nested in its closest transitioning item"
22:57:57 [fantasai]
... let's say I have scroller, remainign item
22:58:01 [fantasai]
... currently everything is siblings
22:58:06 [fantasai]
... but in this mode, we would nest them like this
22:58:22 [fantasai]
... so if you wanted clipping coulduse 'overflow: clip' as these things move around
22:58:30 [fremy]
q-
22:58:35 [fantasai]
JakeA: Getting towards the end, last topic is pseudo-selector stuff can discussin CSSWG instead
22:58:40 [fantasai]
JakeA: Any questions?
22:58:48 [fantasai]
smfr: Can you control the z-order of things being transitioned?
22:59:02 [fantasai]
JakeA: yes, all in top layer, and there's a container that wraps these that has the pseudo-selector of ::page-transition
22:59:08 [fantasai]
... that's positoin:fixed, and children are position:absolute
22:59:13 [fantasai]
... so you can use z-index just as normal
22:59:25 [fantasai]
smfr: if there are 2 elements and different ordering in the old page and new page, would they flip halfway
22:59:29 [fantasai]
JakeA: we pick it based on the old page
22:59:44 [fantasai]
khush__: old tags are orderd in old page, if new tages added in new page they're appended
22:59:52 [fantasai]
smfr: so old content is on top?
22:59:54 [fantasai]
khush__: ??
23:00:01 [fantasai]
smfr: [question]
23:00:06 [fantasai]
JakeA: it's in top layer
23:00:10 [fantasai]
khush__: topper top layer
23:00:18 [fantasai]
JakeA: because we want them to work even if fullscreen mode
23:00:42 [fantasai]
smfr: so can't have video preview animate into new page and then place play button on top unless it's in the old page
23:00:50 [fantasai]
... consider youtube embed with play button in the made
23:01:03 [fantasai]
... but suppose animate somethng looks like a poster frame, and have play button appear on top in the transition
23:01:20 [fantasai]
JakeA: that's fien, you have outgoing image and incoming image, so incoming image would have the play button
23:01:28 [fantasai]
... can hide old image immediately rather than cross-fade
23:01:37 [fantasai]
JakeA: you can make the play button a separate thing you can transition
23:01:43 [fantasai]
... fine to have one of those things only be in the incoming page
23:01:55 [fantasai]
... for instance, in this example, the sidebar that you see
23:02:08 [fantasai]
... between these states, it's either only incoming image or only outgoing image
23:02:17 [fantasai]
... because only eists on such page
23:02:29 [fantasai]
fremy: The button if it doesn't appear on the existing page, won't move along with the video
23:02:36 [fantasai]
... but the nesting proposal would solve it?
23:02:42 [fantasai]
... when you get nesting, can say this button belongs to this other thing
23:02:56 [fantasai]
JakeA: if you have something on only one side, it wouldn't move right
23:03:02 [fantasai]
... nesting would cause it to move along with its parent
23:03:10 [fantasai]
JakeA: over time, any last questions?
23:03:30 [fantasai]
Meeting closed.
23:03:37 [RRSAgent]
I have made the request to generate https://www.w3.org/2022/09/14-pagetransitions-minutes.html fantasai
23:22:25 [dom]
dom has joined #pagetransitions
15:01:33 [wendyreid]
wendyreid has joined #pagetransitions
15:50:13 [dholbert]
dholbert has joined #pagetransitions
16:11:52 [wendyreid]
wendyreid has left #pagetransitions
16:24:59 [dholbert]
dholbert has joined #pagetransitions
17:40:47 [dholbert]
dholbert has left #pagetransitions
21:14:55 [dom]
dom has joined #pagetransitions
21:38:09 [fantasai]
slideshow: https://lists.w3.org/Archives/Public/www-archive/2022Sep/att-0007/set-slides.pdf
21:38:13 [RRSAgent]
I have made the request to generate https://www.w3.org/2022/09/14-pagetransitions-minutes.html fantasai
21:39:03 [fantasai]
i/Topic:/Slides: https://www.w3.org/2022/09/14-pagetransitions-minutes.html
21:39:07 [RRSAgent]
I have made the request to generate https://www.w3.org/2022/09/14-pagetransitions-minutes.html fantasai
21:57:06 [dom]
Zakim, bye
21:57:06 [Zakim]
leaving. As of this point the attendees have been wendyreid, dholbert, khush__
21:57:06 [Zakim]
Zakim has left #pagetransitions
21:57:45 [dom]
RRSAgent, bye
21:57:45 [RRSAgent]
I see no action items