Lightnews — Scholar-powered news

Noam Rosenthal @nomster.bsky.social · 2d

But it has a PWA as well... I have both installed for comparison.

1 1

Noam Rosenthal @nomster.bsky.social · 15d

Awesome, seems like you're all sorted!

1

Noam Rosenthal @nomster.bsky.social · 15d

It's a question of whether tick should mean "ASAP, but definitely after all the microtasks, but definitely before the next paint" vs. "as late as possible, but before next paint, but ASAP if painting is suppressed for some reason"

I am not well versed in Svelte enough to say what's "better" :)

1

Noam Rosenthal @nomster.bsky.social · 15d

Of course, but the comment says "in almost all cases requestAnimationFrame will fire first" which is incorrect.

This would mean that you would now often have multiple ticks in the same frame in the normal (no view transition) case.

1 1

Noam Rosenthal @nomster.bsky.social · 15d

rAF wouldn't always beat setTimeout(f, 0). you can get multiple timeout calls in the same frame.

2

Noam Rosenthal @nomster.bsky.social · 15d

If you were using rAF up until now then the difference won't be concrete/noticeable I guess.

1

Noam Rosenthal @nomster.bsky.social · 15d

... also, we take feedback from web developers and framework authors very seriously, so please keep at it!

1 4

Noam Rosenthal @nomster.bsky.social · 15d

Ah yes, makes sense.

I would suggest calling scheduler.yield() there in case you are waiting on a VT callback, falling back to setTimeout if that's not supported in the browser.

1

Noam Rosenthal @nomster.bsky.social · 15d

Well we detect that the transition timed out, not necessarily due to a deadlock... I think the animation panel gives some indication when that happens? I'll check with the team.

1 2

Noam Rosenthal @nomster.bsky.social · 15d

Interesting... not trivial though!
Knowing that this is a deadlock requires static analysis that predicts that the promise resolution has some kind of dependency on the rAF. There could be legit use cases for calling rAF in the callback as long as the promise resolution doesn't depend on it.

1 1

Noam Rosenthal @nomster.bsky.social · 15d

Racing - Is this in order to have some sort of time limit for the callback? Can you expand on the use case and perhaps this has some other avenue?

I totally emphasize with the annoyance, a few things in view transitions are not trivial, some for a good reason. This one specifically is unavoidable.

1 4

Noam Rosenthal @nomster.bsky.social · 15d

... But ordinary non-rendering tasks continue as normal, so setTimeout callbacks are still called.

1

Noam Rosenthal @nomster.bsky.social · 15d

It's by design and in the spec.
When we await the callback promise, rendering is paused until the new state of the DOM is settled, and so are rAFs. Having no frames (and thus no rAF) between view transition "start" and "active" ensures that the animation starts at the old state.

2 8

Noam Rosenthal @nomster.bsky.social · 20d

Yea there was a common theme of feedback during the last year or so about the "frozen middle bit" of a cross-document view transition

1 1

Noam Rosenthal @nomster.bsky.social · 20d

(For now just trying it out in chromium to see if the resulting UX is nice)

2

Noam Rosenthal @nomster.bsky.social · 20d

Yes, you got it right!

1

Noam Rosenthal @nomster.bsky.social · 23d

I think the root of the problem is that there is no good way in the platform to access/define these UI elements when their lifecycle originates from style/layout (e.g. columns and scroll-markers).

I've made some attempt for an alternative model in github.com/w3c/csswg-dr... but it's not simple.

Add a property to the `CSSPseudoElement` IDL interface to determine if a pseudo element "exists" · Issue #12158 · w3c/csswg-drafts

Full context: https://github.com/danielsakhapov/CSSPseudoElementDoc?tab=readme-ov-file#21-existence-confusion Description: CSSPseudoElement object is returned from pseudo(type) if type is parsed co...

github.com

1 2

Noam Rosenthal @nomster.bsky.social · 26d

Yay another corner-shape article! Keep them coming!

What Can We Actually Do With corner-shape? | CSS-Tricks share.google/sTQD2Jh8vvzE...

What Can We Actually Do With corner-shape? | CSS-Tricks

When I first started messing around with code, rounded corners required five background images or an image sprite likely created in Photoshop, so when

share.google

1 5

Noam Rosenthal @nomster.bsky.social · 26d

Yea, there might already be a standard like this.
Anyway, I've opened github.com/mdn/content/... to address this.

corner-shape examples should show notification when the feature is not supported · Issue #41113 · mdn/content

MDN URL https://developer.mozilla.org/en-US/docs/Web/CSS/corner-shape What specific section or headline is this issue about? corner-shape What information was incorrect, unhelpful, or incomplete? T...

github.com

1

Noam Rosenthal @nomster.bsky.social · 27d

... But it's worth trying out all this stuff to make sure the various cases are covered.

Noam Rosenthal @nomster.bsky.social · 27d

If you use shadow DOM for encapsulation and the view transition is inside the shadow you might not need tag containment, as the shadow boundary already does that.

1 1 1

Noam Rosenthal @nomster.bsky.social · 27d

Thanks, good point! I will report it so that it's corrected.

1 1

Noam Rosenthal @nomster.bsky.social · 27d

What happened is that we've made view-transition names shadow-scoped at some point, so after that you couldn't make document-scoped view-transition that pierce shadow roots, and have to use ::part for that.

But if the whole view-transition is scoped inside the shadow you should be fine methinks.

1

Noam Rosenthal @nomster.bsky.social · 27d

By design they should "just work" with the view-transition-name matching working only within the scope.

I haven't tested this myself though.

1 1

Noam Rosenthal @nomster.bsky.social · 27d

corner-shape documentation is now available on mdn!
developer.mozilla.org/en-US/docs/W...

corner-shape - CSS | MDN

The corner-shape shorthand CSS property specifies the shape of a box's corners, within the area specified by its border-radius property value.

developer.mozilla.org

1 2 15