View Transition API在Edge122、macOS Opera失效，Chrome正常求排查

问题背景 #

View Transition API在Google Chrome中可正常工作，但在macOS系统的Microsoft Edge 122版本及Opera浏览器中无法生效。根据兼容性表，这两款浏览器本应支持该API。本次场景仅通过两个HTML文件实现：点击index.html中的图片跳转至child.html，后者包含同一图片但尺寸更大，Chrome中API能完美处理尺寸差异实现过渡效果。

代码示例 #

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>

问题排查与修复 #

1. 无效HTML结构导致解析异常 #

child.html存在明显的结构错误：<body>标签出现在<a>和<img>之后，不符合HTML标准中<body>需包裹所有可见内容的要求。浏览器对无效结构的容错解析可能干扰View Transition API对元素状态的识别，这是核心问题。

修复方法：补全标准HTML结构，将所有可见内容移入<body>内，同时确保index.html也使用完整结构：

<!DOCTYPE html>
<html>
<head>
    <meta name="view-transition" content="same-origin">
    <style>
        .img-small {
            view-transition-name: small;
            width: 900px;
        }
    </style>
</head>
<body>
    <a href="index.html">
        <img class="img-small" src="https://images.rawpixel.com/image_800/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIyLTA1L3NrOTc5MS1pbWFnZS1rd3Z1amE5Ni5qcGc.jpg">
    </a>
</body>
</html>

2. 浏览器标准模式要求 #

部分浏览器对View Transition API的支持依赖页面处于标准模式，即必须包含<!DOCTYPE html>声明。缺失该声明会导致浏览器进入怪异模式，直接禁用API功能。

3. 浏览器特性与缓存检查 #

• 检查Edge/Opera的特性开关：在edge://flags（Edge）或opera://flags（Opera）中搜索View Transition，确认特性处于启用状态
• 清除浏览器缓存，避免旧资源干扰API生效

内容的提问来源于stack exchange，提问作者user7289922