uhyo · December 22, 2025 13:43
diff --git a/navigation-api-scroll-to-top-repro.html b/navigation-api-scroll-to-top-repro.html
 <!doctype html>
 <html>
  <head>
    <meta charset="utf-8">
    <title>Navigation API Scroll To Top Repro</title>
    <style>
      body {
        min-height: 200vh;
      }
      .controls {
        position: fixed;
        bottom: 16px;
        left: 16px;
        right: 16px;
        background-color: #f0f0f0;
        padding: 8px;
        border: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <h1>Navigation API Scroll To Top Repro</h1>
    <p>This page is used to reproduce an issue with the Navigation API that exists in Google Chrome and Safari. Firefox does not exhibit this issue.</p>
    <h2>Issue Description</h2>
    <p>When a push navigation is intercepted, the browser should scroll to the top after transition.</p>
    <p>The affected browsers do not scroll to the top after navigation, keeping the scroll position in the previous page.</p>
    <h2>Steps to Reproduce</h2>
    <p>Use the buttons floating at the bottom of this page to:</p>
    <ol>
      <li>Scroll down the page.</li>
      <li>Click the "Navigate to Page 2" button to navigate to <code>/page2</code></li>
      <li>Observe that the scroll position is retained instead of scrolling to the top.</li>
    </ol>
    <div class="controls">
      <button type="button" onclick="window.scrollTo(0, document.documentElement.clientHeight, { behavior: 'smooth' })">1. Scroll to bottom</button>
      <button type="button" onclick="navigation.navigate('page2')">2. Navigate to Page 2</button>
    </div>
    <script type="module">
      navigation.addEventListener('navigate', (event) => {
        if (!event.destination.url.endsWith('page2')) return;
        event.intercept();
        document.body.replaceChildren(
          document.getElementById('page-2').content.cloneNode(true)
        )
      });
    </script>
    <template id="page-2">
      <h1>Welcome to Page 2!</h1>
      <p>This is Page 2. According to the Navigation API specification, the scroll position should be at the top of this page.</p>
      <button type="button" onclick="navigation.traverseTo(navigation.activation.entry.key).committed.then(()=>location.reload())">Go back to Page 1</button>
    </template>
  </body>
  </html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Navigation API Scroll To Top Repro</title>
	<style>
	body {
	min-height: 200vh;
	}
	.controls {
	position: fixed;
	bottom: 16px;
	left: 16px;
	right: 16px;
	background-color: #f0f0f0;
	padding: 8px;
	border: 1px solid #ccc;
	}
	</style>
	</head>
	<body>
	<h1>Navigation API Scroll To Top Repro</h1>
	<p>This page is used to reproduce an issue with the Navigation API that exists in Google Chrome and Safari. Firefox does not exhibit this issue.</p>
	<h2>Issue Description</h2>
	<p>When a push navigation is intercepted, the browser should scroll to the top after transition.</p>
	<p>The affected browsers do not scroll to the top after navigation, keeping the scroll position in the previous page.</p>
	<h2>Steps to Reproduce</h2>
	<p>Use the buttons floating at the bottom of this page to:</p>
	<ol>
	<li>Scroll down the page.</li>
	<li>Click the "Navigate to Page 2" button to navigate to <code>/page2</code></li>
	<li>Observe that the scroll position is retained instead of scrolling to the top.</li>
	</ol>
	<div class="controls">
	<button type="button" onclick="window.scrollTo(0, document.documentElement.clientHeight, { behavior: 'smooth' })">1. Scroll to bottom</button>
	<button type="button" onclick="navigation.navigate('page2')">2. Navigate to Page 2</button>
	</div>
	<script type="module">
	navigation.addEventListener('navigate', (event) => {
	if (!event.destination.url.endsWith('page2')) return;
	event.intercept();
	document.body.replaceChildren(
	document.getElementById('page-2').content.cloneNode(true)
	)
	});
	</script>
	<template id="page-2">
	<h1>Welcome to Page 2!</h1>
	<p>This is Page 2. According to the Navigation API specification, the scroll position should be at the top of this page.</p>
	<button type="button" onclick="navigation.traverseTo(navigation.activation.entry.key).committed.then(()=>location.reload())">Go back to Page 1</button>
	</template>
	</body>
	</html>
No results found