[SOLVED] View-transition API does not work in Microsoft Edge 122 or Opera on macOS while working perfectly in Chrome

View-transition API does not work in Microsoft Edge 122 or Opera on macOS while working perfectly in Chrome

The view-transition API works in Google Chrome but not in Microsoft Edge 122. Both browsers should be supported according to the compatibility table. I am using macOS. There is no JavaScript involved. It works in Chrome just by using these two HTML files.

The index.html page navigates to child.html page when image is clicked. The child.html page has the same image but bigger, and the view transition API works nicely in Chrome as it handles the size difference.

Here are my HTML files:

index.html

<meta name="view-transition" content="same-origin">

<a href="child.html">
    <img class="img-small" src="https://images.rawpixel.com/image_800/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIyLTA1L3NrOTc5MS1pbWFnZS1rd3Z1amE5Ni5qcGc.jpg">
</a>

<style>
    .img-small {
        view-transition-name: small;
        width: 600px;
    }
</style>

child.html

<meta name="view-transition" content="same-origin">

<a href="index.html">
    <img class="img-small" src="https://images.rawpixel.com/image_800/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIyLTA1L3NrOTc5MS1pbWFnZS1rd3Z1amE5Ni5qcGc.jpg">
</a>

<body></body>

<style>
    .img-small {
        view-transition-name: small;
        width: 900px;
    }
</style>

Do you know where might be the problem? Thanks!

Solution

You may have enabled the Chrome flag: chrome://flags/#view-transition-on-navigation. That's why it works in Chrome instead of Microsoft Edge without any JavaScript code.

Unfortunately, Microsoft Edge currently does not have this flag, so view-transition does not work. You may expect this flag to be added in the future. You can also send feedback (Alt+Shift+I) in Microsoft Edge to request this flag.