Chrome中View Transitions与滚动恢复的异常行为问询

我在Chrome浏览器中发现View Transitions与滚动恢复存在异常表现，尝试确认这是Bug还是预期行为，但未找到二者结合滚动时的官方说明。

我制作了一个模拟SPA的示例，包含两个页面：页面1底部有一个蓝色小球，页面2顶部有一个蓝色大球。

操作步骤 #

• 滚动到页面1底部
• 点击“next”进入页面2
• 在页面2向上滚动至顶部
• 点击返回按钮

Chrome的异常表现 #

• 立即将页面2滚动回之前的位置（恢复滚动状态）
• 基于新位置（比点击返回时的位置更靠上）开始小球的动画
• 再平滑过渡到页面1

这种先恢复滚动再启动动画的行为导致动画出现断层，完全失去了过渡动画的意义。

请问是我的SPA实现存在问题，还是这是Chrome的Bug，或是预期行为？

实现代码 #

JavaScript代码

let page = 0;

function render() {
  let body = '';

  if (page == 0) {
    for (let i = 0; i < 13; i++) {
      body += `<p>.</p>`;
    }

    body += `<div style="height: 30px; width: 30px; border-radius: 100%; background-color: blue; view-transition-name: bar"></div>`
  } else {
    body += `<div style="height: 300px; width: 300px; border-radius: 100%; background-color: blue; view-transition-name: bar"></div>`

    for (let i = 0; i < 13; i++) {
      body += `<p>.</p>`;
    }
  }


  document.querySelector('#content').innerHTML = body;
  document.querySelector('a').innerHTML = page == 0 ? 'Next' : 'Back';
}

render();

const useViewTransitions = true;

function transition() {
  if (useViewTransitions) {
    document.startViewTransition(render);
  } else {
    render();
  }
}

document.querySelector('a').addEventListener("click",
  async function(event) {
    event.preventDefault();

    if (page == 0) {
      page++;

      history.pushState({
        page
      }, '');

      transition();
    } else {
      history.back();
    }
  }
);

window.addEventListener("popstate", ({
  state
}) => {
  page = state?.page || 0;

  transition()
})

HTML代码

<div style="height: 30px; width: 30px; border-radius: 100%; background-color: red"></div>

<div id="content">
</div>

<a href="#"></a>

操作截图 #

返回前页面2状态：

恢复滚动后的页面2状态：

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