 Progressive Enhancement is the best. After adding a PE-capable feature like View Transitions all you have to do is sit back & relax while other browsers add support for it. And once they do, all their users automatically get the enhanced experience. What's not to like?! 🤩 8 comments
 @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://github.com/pepelsbey/pepelsbey.dev/blob/main/src/styles/global/transitions.css @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. @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. @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. |
Gregory's Server
@bramus I had an impression today that auto View Transitions implementations are still not ready. I opened my website in Safari TP, and it was blinking weirdly during the transition. Not very usable, I’d say. Then I tried to compare it with how smoothly it works in Chrome, but it only worked in one of five navigations. Thankfully, not getting in the way of normal navigation. I guess it’s hard to do it right, and it will take some time to debug it.