I tried to make one of those fancy LLM typing animations using highlights. I don’t remember many details, but apparently, you can’t animate highlight properties, like opacity. I shelved my attempt when I noticed that the highlights reset when new text content was appended :(
This seems related, but not as drastic as this bug from almost three years ago:
bugs.webkit.org/show_bug.cgi...
It would be nice to find a workaround. For now, I have only managed to unblock transactions by nuking the database 😟.
Will file an issue on GitHub tomorrow
@jakearchibald.com sorry to bother you right before the holidays. I've just managed to reproduce a nasty bug in idb-keyval in Safari. Transactions freeze after page navigation if an active long transaction was in progress.
zubiden.dev/demo/idbbug....
Who won this staring contest?
Just tried it. The image pair is positioned correctly, but the element looks shifted in the capture
... and done!
Filed: bugzilla.mozilla.org/show_bug.cgi....
Noticed some clipping when changing "right" property to "left", probably related to this issue.
Either way, congrats on the release! Glad to help you fix the current bugs.
Does Firefox have some kind of rejection logic if element is outside of the viewport? Seems that some combinations of nested fixed/absolute elements with transforms can trigger it, while element is clearly visible
It is live on web.telegram.org/a, but I would disable VT on Firefox for the time being.
I will try to extract a minimal reproduction of it later today.
@jakearchibald.com Is there a way to debug View Transitions in Firefox?
In my transition, the participating elements become transparent for the duration of the transition. This does not happen in Chrome or Safari.
Chrome and Firefox comparison
Sounds right, as it creates new backdrop root, as per spec
www.w3.org/TR/css-view-...
BTW, I've got a question about this post.
There's a note saying that the Chrome team plans to move most VT animations to the compositor. Has that happened? If not, is there an issue on tracker that I could follow?
It feels like I've lost a bit of my sanity, but I managed to get the minimal repro 🙃
I hope this gets fixed soon on Mac. I've had to disable the particle animation to ship the feature with VTs 😅
crbug.com/446730393
I have just updated my Canary installation and can no longer reproduce the issue on Windows 11.
It still happens on Mac with the same build number 🫠.
I guess I'll just wait a day or two in case some recent patch didn't make it into the Mac build
I don't think you understood me correctly.
Even if I skip the DOM callback, VT gets stuck trying to create '*-old' snapshots.
If I remove the backdrop filter or stop the animation inside those elements, it works just fine.
It is behind auth, that's why I am trying to replicate it. If you really want to check it out for yourself, send me a DM.
DOM update callback is sync, just calling setState. I wait for one frame for it to apply, but in this case it's not called.
(This is not React, but a similar custom framework)
I've tried to prepare a minimal reproduction for a bug report, but failed.
It appears that the backdrop-filter container with the animating elements inside is the cause of the problem, but only under certain, yet unknown to me conditions.
How to properly debug this?
@bram.us is it normal for View Transition to get stuck during the initial capture phase? It doesn't call my DOM update callback, so I end up waiting 4 seconds for a timeout error, and only then callback gets executed.
This seems to be Chrome-only problem, and is extremely flaky.
Each time I see SVG updates, I hope that SVG Filters are getting some love. Not yet 🥲
bugs.webkit.org/show_bug.cgi...
There is "gangnam-style" on MDN, and I still don’t know if it is an easter egg, or an actual supported value.
developer.mozilla.org/en-US/docs/W...
Yep, and the usual optimization is to wrap element groups into a div, animate it instead, and then remove that wrapper. VT snapshot logic could be a great alternative to wrapping/unwrapping process, but sadly, it isn’t :(
Yes, but if you insert/remove an item into it and want others to animate, doing that for each item separately is very unoptimized.
In this simple card demo style recalc on each frame grows from 0.2ms for 5 items to 3ms for 75 items
view-transitions.chrome.dev/cards/spa/
Is it possible for multiple elements to share a single snapshot? In lists, having 50 separate snapshots doing the same animation seems far heavier than using one shared snapshot for all. Doing grouping using DOM requires reflow :(
I'm considering deploying the beta version on a subdomain or a different path. The SPA stores data locally and relies on localStorage/IDB, so I'm looking for a way to make switching between them more or less seamless.
Bot seems dead, Xwitter counterpart posts intents without links :(
