@bramus It seems like the abrupt transition in Chrome...

@bramus It seems like the abrupt transition in Chrome is caused by the Stylish extension. But in Safari TP’s case, it’s just how it works: there’s no green background anywhere in styles. It seems like it comes from the hero picture.

https://pepelsbey.dev/

https://github.com/pepelsbey/pepelsbey.dev/blob/main/src/styles/global/transitions.css

Like 3 October at 7:43 | Wall-to-wall | Open on mastodon.social

5 comments

Bramus

@pepelsbey Also noticed Safari Technology Preview flashes a color in the background when doing a View Transition.

I have filed https://bugs.webkit.org/show_bug.cgi?id=279962 for that a while ago.

As for Chrome: I tried your site and the first 4 times it showed no transition but after that all was fine. Maybe it was a caching issue? Trying it out with DevTools set to no cache and slow 3G I still see the VTs.

3 October at 9:47 | Open on front-end.social

Bramus

@pepelsbey If you set Safari to Compact Tabs Mode you can see where it gets the green from.

Screenshot of your site with Safari set to Compact Tabs Mode

3 October at 9:54 | Open on front-end.social

Vadim Makeev

@bramus Oh, this one https://github.com/pepelsbey/pepelsbey.dev/blob/4d89423196e998691cd3d1a137c2fea19a6a30c4/src/layouts/page.njk#L48

3 October at 10:00 | Open on mastodon.social

Bramus

@pepelsbey Yes.

In the https://simple-set-demos.glitch.me/5-heading-text/ case there is no defined theme-color though, so Safari (cleverly) picks it from somewhere else.

3 October at 10:24 | Open on front-end.social

Vadim Makeev

@bramus Yes, I also noticed no VTs before, but at much lower rates than with the Stylish enabled. I wonder if some server headers might impact caching and VT behavior. In my case, it’s pretty much stock Netlify headers.

3 October at 10:03 | Open on mastodon.social

Go Up